How to fit whole image in to div which have his dimensions

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/

I want to reduce my image to fit it in div. How I can do it with jquery or css, without mannualy writing like I did before.

p.s. I want to keep width:height ratio

Answer 1

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

First, give that div appropriate size as you want and then give your Image 100% width.