如何将整个图像适配到具有其尺寸的 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. 我想保持宽高比

- zhinyz

---

将其设置为背景 https://jsfiddle.net/40ay7uco/1/ - Nenad Vracar

不要使用max-height / max-width，而是直接使用height / width。请参见此处：https://jsfiddle.net/40ay7uco/2/ - Phiter

@NenadVracar，感谢您的建议，但属性将由PHP代码显示，因此这种方法对我不适用。 - zhinyz

@PhiterFernandes 我想保持宽高比。 - zhinyz

@zhinyz 或许你可以像这样做，使用 PHP 在“data-background”属性中生成图像 URL https://jsfiddle.net/40ay7uco/6/. - Nenad Vracar

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％宽度。

- Parth Raval

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的范围。

- Phiter

---

我想要保持宽高比。 - zhinyz

哦，我明白了，让我查一下。 - Phiter

谢谢，它可以工作，但仅适用于宽度大于高度的图像。也许您知道两种图像类型的解决方案？ - zhinyz

在这种情况下，您需要使用JavaScript w / Jquery：https://dev59.com/questions/RIHba4cB1Zd3GeqPWtqS - Phiter

Answer 3

我认为object-fit是你正在寻找的内容。请注意浏览器支持情况，可参考表格。

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

- Stickers

Answer 4

你可以使用JQuery设置background-image，并在property div上使用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>

- Nenad Vracar

Answer 5

如果您想保持图像的尺寸，则宽度应自动调整。

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

- vanhonit