如何将整个图像放入具有他尺寸的 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 来做到这一点，而无需像以前那样手动编写。

p.s。我想保持 width:height 比例

Answer 1

您正在为图像设置最大尺寸，因此它只会以其自身的分辨率显示。让宽度为自动大小将保持比例。

这应该有效：

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

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

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

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

首先，根据需要给 div 适当的尺寸，然后给图像 100% 宽度。

Answer 4

我觉得object-fit is what you're looking for. Be aware of the browser support 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 5

您可以将 background-image 设置为 JQuery 并在 property div[=16 上使用 background-size: cover; =]

$('.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>

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

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

jquery

css

image

image-resizing