Question

我有一堆图像缩略图，我正在网页中显示。所有图像都是256像素宽，我用<img width="128px" ...>

将它们缩小了50％

大多数图像的比例为4x3，因此它们可以很好地划分几行。

然而，一些图像非常高（例如256x1200）。我想指定这些图像的最大高度，但图像必须被截断（即仅显示图像的顶部）而不是缩放（这会不合需要地挤压图像）。

我已经尝试过指定CSS img { max-height="128" }，但当然这会给我带来不受欢迎的缩放。

那么：如何指定导致图像截断而不缩放的最大高度？

更新：谢谢大家，我在下面添加了一个示例。

Answer 1

将它们包裹在一个被分类的div中，将div上的高度设置为128，然后为该类设置overflow: hidden。

Answer 2

将图像包裹在div中，将div的高度和宽度设置为您想要的值。添加溢出样式：隐藏到div。

Answer 3

感谢所有回复的人......这是解决方案的一个例子。

<div style="max-height: 170px; overflow: hidden;">
    <img width="128" align="top" src="img1.jpg">
    <img width="128" align="top" src="img2.jpg">
    <img width="128" align="top" src="img3.jpg">
</div>

每个高于170像素的图像都被截断，图像对齐到顶部。为简洁起见，我将样式信息内联。在我的真实代码中，它是在样式部分。

Answer 4

如果我们显示一行宽度不流畅的图像（例如，每列宽度为25％的四列图像），我们希望它们的高度随着宽度的变化而缩放，一种方法是使用带有background-image的div行：url（...）而不是<img>标记。

这允许我们在div上设置padding-bottom，这将给它们一个高度，即它的容器宽度的百分比。例如，如果我们想要完美的方形图像，我们应该将它们的宽度％和padding-bottom％设置为相同。您可以调整以保持图像所需的任何宽高比。

.image-container {
width: 33.33333333%;
padding-bottom: 33.33333333%;
margin: 0;
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

请参阅https://jsfiddle.net/qxn87wmo/20/

然后只需根据需要设置背景大小，背景位置。

CSS：将一行图像截断为相同的高度

4 个答案: