如何将整个图像放入具有其尺寸的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写作。

P.S。我想保持宽度：高度比

Answer 1

<div id="img" style="width:50px;height:50px">
  <img src="http://s16.postimg.org/nhxsxl1hh/image.jpg" alt="" style="width:100%" />
</div>

首先根据需要给div设置合适的尺寸，然后给你的图像100％宽度。

Answer 2

您正在设置图片的最大尺寸，因此它只会显示在自己的分辨率上。让宽度为自动尺寸将保持比率。

这应该有效：

.property {
    border: 3px solid white;
    box-shadow: 0px 0px 5px #aaaaaa;
    width: 270px;
    height: 200px; /*This will keep aspect ratio for your image*/
    overflow: hidden;
}
.property img {
    height: 100%; /*This will keep aspect ratio for your image*/
    width: auto;  /*Not necessary since this is the default value*/
}

<div class = "container">
  <div class = "row">
    <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>
  </div>
</div>

正如你所看到的那样，即使看不到它，图像也会超出div。

Answer 3

我认为 object-fit 是您正在寻找的。请注意浏览器支持tables。

<强> jsfiddle

.object-fit {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
  object-fit: cover; /*magic*/
  border: 3px solid white;
  box-shadow: 0px 0px 5px #aaaaaa;
  box-sizing: border-box;
}

<img class="object-fit" src="http://i.imgur.com/4fYhkO2.png" />

Answer 4

如果你想保持尺寸，图像的宽度应该是自动的。

.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%;
}

我编辑了你的代码。您可以结帐https://jsfiddle.net/dtv6bk75/

Answer 5

您可以使用 JQuery 设置background-image并在background-size: cover; div上使用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>