jquery - 如何将整个图像放入具有他尺寸的div

Question

<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>

https://jsfiddle.net/40ay7uco/

我想缩小图像以适应 div。我如何使用 jquery 或 css 做到这一点，而无需像以前那样手动编写。

附注我想保持宽高比

Answer 1

<div id="img" style="width:50px;height:50px">
  <img src="https://via.placeholder.com/150" alt="image" style="width:100%" />
</div>

首先，根据需要给那个 div 适当的大小，然后给你的图像 100% 宽度。