如何将整个图像放入具有其尺寸的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做到这一点,没有像我之前那样的mannualy写作.

ps我想保持宽度:高度比

Answer 1

您可以background-image使用JQuery设置并在divbackground-size: cover;上使用property

$('.property').each(function() {
  var background = $(this).data('background');
  $(this).css('background-image', 'url('+background+')');
});

.property {
    border: 3px solid white;
    box-shadow: 0px 0px 5px #aaaaaa;
    width: 270px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "row">
    <small>Original picture size is 876x493, I resize it to:</small>
    <div class = "property" data-background="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 class = "property" data-background="http://placehold.it/350x150">
    </div>
    
    <div class = "property" data-background="http://placehold.it/700x500/ffffff/000000">
    </div>
</div>