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

Question

我有一堆图片缩略图要在网页中展示，所有的图片都有256像素宽度，我正在使用<img width="128px" ...>将它们缩小50%。

大多数图片都是4x3比例，所以它们很好地分布在几行中。

然而，有些图片非常高（例如256x1200）。 我想为这些图片指定一个最大高度，但必须截断图片（即仅显示图片的顶部部分），而不是缩放图片（这会导致图片失真）。

我尝试过使用CSS img { max-height="128" }，但当然这给了我不希望出现的缩放效果。

那么，如何指定一个最大高度，使得图片被截取而不是缩放？

更新：感谢大家，我添加了下面的示例。

- Mark Harrison

Answer 1

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

- Myles

---

如果您想垂直居中图像：https://dev59.com/y2Ij5IYBdhLWcg3wilrB - Nico Toub

Answer 2

将图片包含在div中，将div的高度和宽度设置为所需大小。向div添加overflow:hidden样式。

- Jey

Answer 3

如果我们正在展示一行图像，其宽度是流体的（例如，每个宽度为25%的四列图像），并且我们希望它们的高度随着宽度的变化而缩放，一种方法是使用具有背景图像的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/

然后只需要根据需要设置背景大小和背景位置即可。

- Ray J

Answer 4

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

<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像素的图像都会被截断，并且图像会对齐到顶部。我将样式信息内联以简洁为重点。在我的实际代码中，它在样式部分中。

- Mark Harrison

---

注意：HTML5不支持<img>标签上的align属性，而在HTML 4.01中已被弃用。 - Evereq

@EvereQ，你推荐使用什么替代品？ - Mark Harrison

它已经被弃用，推荐使用样式表（CSS）- 在CSS中使用“vertical-align”代替 :) - Evereq