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

Question

有没有一种方法，仅使用 CSS，将图像的高度设置为其容器的高度，同时保持纵横比，允许宽度溢出并隐藏？这听起来要求很多，但肯定有办法。我的意思是，我希望显示图像的全高，但如果宽度比容器允许的宽度宽(使用 bootstraps 网格系统)，那么就溢出:隐藏。我将高度设置为 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 我需要保持图像的纵横比，将高度锁定为容器高度，让图片的多余部分溢出并隐藏起来，让我能够看到尽可能多的图片，同时仍然装满容器。

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

Answer 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>