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

我在网页中显示一串图像缩略图。所有图像的宽度为256像素，我将它们缩小了50％<img width="128px" ...>CSS：将一行图像截断到相同的高度

大多数图像都具有4x3的比例，所以它们在几行上格栅很好。

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

我试过指定CSS img { max-height="128" }，但当然这给了我不希望的缩放比例。

所以：我怎样才能指定一个最大高度，将导致图像截断，而不是缩放？

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

来源

2010-01-09 Mark Harrison

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

来源

2010-01-09 06:33:23 Myles

如果你想垂直居中图像：http://stackoverflow.com/questions/20141865/responsive-vertical-center-with-overflow-hidden – 2016-09-24 06:03:58

将图像包装在div中，将div的高度和宽度设置为所需的值。添加一种溢出风格：隐藏到div中。

来源

2010-01-09 06:34:43

感谢所有谁回答......这里的解决方案的例子。

<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像素的图像都被截断，图像对齐到顶部。为了简洁起见，我将内嵌的样式信息放在内部。在我真实的代码中它是一个样式部分。

来源

2010-01-09 07:59:41

注：在HTML5中不支持的align属性，它是在HTML 4.01中弃用 – Evereq 2012-10-02 09:35:03

@EvereQ，建议的替代品是什么？ – 2012-10-02 16:44:00

它已被弃用，支持样式表（CSS） - 在CSS中使用'vertical-align'代替:) – Evereq 2012-10-09 12:21:42

如果我们展示了一行宽度为流体的图像（例如，四列图像的宽度分别为25％），并且我们希望它们的高度随着宽度的变化而缩放，一种方法是使用一行的div与background-image：url（...）而不是<img>标签。

这使我们可以在div上设置填充底部，这将使它们的高度达到其容器宽度的百分比。例如，如果我们想要完美的方形图像，我们应该将它们的宽度％和填充底部％设置为相同。您可以调整以保持图像所需的任何纵横比。

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

它当时只是一个根据需要设置背景大小，背景，地位的问题。

来源

2016-03-08 17:04:40

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

回答

相关问题