将图像高度设置为容器高度并保持纵横比答案

【问题标题】：Setting image height to container height and keeping aspect ratio将图像高度设置为容器高度并保持纵横比
【发布时间】：2016-10-31 10:03:35
【问题描述】：

有没有办法，仅使用 CSS，将图像的高度设置为其容器的高度，同时保持纵横比，允许宽度溢出并被隐藏？这听起来像是很多要求，但肯定有办法。我的意思是，我希望显示图像的整个高度，但如果宽度比容器允许的宽（使用引导网格系统），那么只需溢出：隐藏。我将高度设置为 100%，看起来不错，但图片从侧面挤压以适合容器内部，而不是溢出和被裁剪。通过将宽度设置为 100%，它正在填充容器。我相信它使用容器作为 100% 的标准，而不是照片的纵横比。所以这就是我需要做的。

这就是我正在做的事情：

<div style="width:150px; height:150px; display:flex; flex-direction:column">
  <img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden">
</div>

TL;DR 我需要保持图像的纵横比，将高度锁定到容器高度，让多余的图片溢出并隐藏起来，让我看到尽可能多的图片，同时仍然装满容器。

如果有办法以某种方式计算哪个维度更小并将那个维度锁定到相关的容器维度，则可以加分。

【问题讨论】：

只要将图片设置为容器的background-image，然后使用background-size:cover;和background-position:center center;
漂亮！将此作为答案，我会将其标记为已回答。
@APAD1 将此作为答案，我会将其标记为正确的。

标签： html css image twitter-bootstrap

【解决方案1】：

如果使用图像标签，则不是那么容易做到这一点，但如果使用 CSS background-image 属性（或快捷方式background），那么

#wrap{width:300px;height:200px;margin:50px;overflow:hidden;}
  #imgDiv{width:1000px;height:1000px;background-image:url(http://placekitten.com/900/900); background-size:cover;}

<div id="wrap">
  <div id="imgDiv">
  </div>
</div>

【讨论】：

运行这个sn-p，我只看到图片的一小部分。我需要尽可能多地查看照片，将其中一个尺寸锁定到其容器中。也许您的解决方案存在特定于浏览器的不兼容性？

【解决方案2】：

您可以将图像设置为容器的背景图像，而不是使用img 标签嵌入图像。然后通过使用background-size:cover; 和background-position:center center; 的组合，您可以使图像匹配容器的高度，同时保持原始图像的纵横比。 background-position 属性将使图像居中，从而裁剪掉左右两侧。

使用速记，该代码如下所示：

&lt;div style="background:url('http://i.imgur.com/RiX7XfW.jpg') center center / cover no-repeat; width:150px; height:150px; display:flex; flex-direction:column"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您是在 CSS 中建议 overflow: hidden 吗？这是一个常规的默认度量，您围绕它说话，就像您可能正在回忆该度量一样。

不设置高度，设置width: 100%，是一种很好的方式来考虑纵横比，更关注全宽。因此，height: 100% 没有指定宽度可能是保持全高和完整纵横比不变的最佳方式。

【讨论】：