将图像高度设置为容器高度并保持长宽比

Question

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

这就是我要做的：

html prettyprint-override"><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我需要保持图像的纵横比，将高度锁定到容器高度，让多余的图片溢出并隐藏，使我能够在填充容器的同时看到尽可能多的图片。

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

Answer 1

您可以将图像设置为容器的背景图像，而不是使用img标记嵌入图像。然后使用背景大小的组合：封面 和背景位置：中心 可以使图像与容器的高度匹配，同时保持原始图像的纵横比。“背景位置”（background position）属性将使图像居中，以便裁剪左右两侧。

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

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

Answer 2

您是否建议在CSS中隐藏溢出？这是一个常规的默认度量值，你围绕它说话，就像你可能在回忆度量值一样。

不设置高度和设置宽度：100%是一种考虑纵横比的好方法，更关注全宽。因此，没有宽度规范的高度：100%可能是保持高宽比完整的最佳方法。

Answer 3

如果使用图像标记，则不容易做到这一点，但如果使用CSS背景图像属性（或快捷方式背景），则

#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;}

html lang-html prettyprint-override"><div id="wrap">
  <div id="imgDiv">
  </div>
</div>