将图像高度设置为容器高度并保持纵横比-Java 学习之路

是否有一种方法，仅使用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我需要保持图像的纵横比，将高度锁定到容器高度，让图片的多余部分溢出并隐藏，让我看到尽可能多的图片，同时仍然填充容器 .

如果有办法以某种方式计算哪个维度较小并将其锁定到相关的容器维度，则可以获得奖励积分 .

2 回答

0
您可以将图像设置为容器的背景图像，而不是使用 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>
```
回复于 2024-04-25T04:02:42+08:00

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

回复于 2024-04-25T04:02:42+08:00

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

2 回答

相关问题