我在网页中显示了一堆图像缩略图。所有的图片都是 256 像素宽，我用<img width="128px" ...>将它们缩小了 50%
大多数图像的比例为 4x3，因此它们可以很好地在几行上网格化。
但是，有些图片非常高（例如 256x1200）。我想为这些图像指定一个最大高度，但图像必须被截断（即只显示图像的顶部）并且不能缩放（这会不希望地挤压图像）。
我已尝试指定 CSS img { max-height="128" }，但这当然会给我带来不希望的缩放。
那么：我怎样才能指定一个最大高度，这将导致图像截断而不是缩放？
更新：谢谢大家，我在下面添加了一个示例。
【问题讨论】：
将它们包装在一个分类的 div 中，将 div 的高度设置为 128，然后为该类设置 overflow: hidden。
【讨论】：
将图像包装在一个 div 中，将 div 的高度和宽度设置为您想要的。给div添加一个overflow:hidden的样式。
【讨论】：
感谢所有回复的人...这是解决方案的一个示例。
<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 像素的图像都会被截断，并且图像会与顶部对齐。为了简洁起见，我将样式信息内联。在我的真实代码中，它位于样式部分。
【讨论】：
如果我们显示一行宽度不固定的图像（例如，四列图像，每列宽度为 25%），并且我们希望它们的高度随着宽度的变化而缩放，一种方法是使用一行带有背景图像的 div: url(...) 而不是 <img> 标签。
这允许我们在 div 上设置 padding-bottom，这将使它们的高度是其容器宽度的百分比。例如，如果我们想要完美的方形图像，我们应该将它们的 width % 和 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/
然后只需根据需要设置背景大小、背景位置即可。
【讨论】：