Jquery 如何将整个图像拟合到具有其维度的div中 原始图片大小为876x493，我将其调整为： 我想要得到的结果（另一种方式）：

我想减少我的形象，以适应它在div。 我如何使用jquery或css来实现它，而不必像以前那样手工编写

---

p、 我想保留宽高比，因为您为图像设置了最大尺寸，所以它只能以自己的分辨率显示。将宽度设为自动大小将保持该比率

这应该起作用：

.property{
边框：3倍纯白；
盒影：0px 0px 5px#aaaaa；
宽度：270px；
高度：200px；/*这将保持图像的纵横比*/
溢出：隐藏；
}
.物业管理{
高度：100%；/*这将保持图像的纵横比*/
宽度：自动；/*不需要，因为这是默认值*/
}

---

如果要保留尺寸，图像的宽度应自动调整

<div class = "container">
  <div class = "row">
    <small>Original picture size is 876x493, I resize it to:</small>
    <div class = "property">
      <img src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/>
    </div>
    <small>Result I want to get (in another way):</small>
    <div class = "property">
      <img style = "max-width: 147%" src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/>
    </div>
  </div>
</div>

我编辑了你的代码。您可以结帐

我想就是你要找的。请注意浏览器支持

。对象匹配{
宽度：200px；/*任意尺寸*/
高度：200px；/*任意尺寸*/
对象匹配：封面；/*魔术*/
边框：3倍纯白；
盒影：0px 0px 5px#aaaaa；
框大小：边框框；
}

---

您可以使用JQuery设置

背景图像

，并使用

背景尺寸：封面在
属性上


$（'.property'）。每个（函数（）{
var background=$（this.data（'background'）；
$（this.css（'background-image'，'url（'+background+'））；
});
.property{
边框：3倍纯白；
盒影：0px 0px 5px#aaaaa；
宽度：270px；
高度：200px；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
}

原始图片大小为876x493，我将其调整为：
将其设置为背景，而不是最大高度/最大宽度，只需使用高度/宽度即可。请参见此处：@NenadVracar，谢谢您的建议，但属性将由php代码显示，因此这种方式不适合me@PhiterFernandes我想保持宽度：高度ratio@zhinyz也许你可以这样做，用php在
data background
attr中生成图像url，让我检查一下，它是有效的，但只适用于宽度大于高度的图像。也许您知道这两种图像类型的解决方案？在这种情况下，您需要Javascript w/Jquery：
.property {
  border: 3px solid white;
  box-shadow: 0px 0px 5px #aaaaaa;
  width: 270px;
  height: 200px;
  overflow: hidden;
}

.property img {
  max-width: 100%;   /*Should remove*/
  max-height: 100%;  /*Should remove*/
  width: auto;
  height: 100%;
}