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）则不是那么容易，那么

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您是否在CSS中建议使用overflow: hidden？这是一项常规的默认措施，您可能会想起它，就像您可能想起该措施一样。

不设置高度，而设置width: 100%，是一种更好地考虑宽高比的问题，它是对整个宽度的关注。因此，height: 100%如果不指定宽度，则可能是保持完整的纵横比完整高度的最佳方法。

Answer 3

您可以将图像设置为容器的背景图像，而不是使用img标记嵌入图像。然后，通过使用background-size:cover;和background-position:center center;的组合，可以使图像与容器的高度相匹配，同时保持原始图像的纵横比。 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>

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

3 个答案: