Question

在我的图库中，缩略图的宽度为240像素，但它们的高度会有所不同。有没有办法裁剪缩略图像，使它们都高150像素？

目前我已经有了这个：

.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}

这样可行，但只有顶行的图像才能看起来很好，因为它们都是对齐的。其他行上的图像未对齐，因为它们被放置在上面一行上图像的原始高度之下。我需要添加什么来对我的CSS进行排序？

Answer 1

我建议将它们包装在设置高度为150px且溢出设置为隐藏的div中。

.galleryImgWrapper {
    height: 150px;
    overflow: hidden;
}
.galleryImgWrapper img {
    /* your styles here */
}

Answer 2

您可以使用这些代码生成缩略图，而无需任何裁剪 .thumbnail { 位置：相对; 宽度：200px; 身高：200px; 溢出：隐藏; } .thumbnail img { 位置：绝对; 左：50％; 最高：50％; 身高：100％; 宽度：自动; -webkit-transform：translate（-50％， - 50％）; -ms-transform：translate（-50％， - 50％）; transform：translate（-50％， - 50％）; } .thumbnail img.portrait { 宽度：100％; 身高：自动; }

<div class="thumbnail">
  <img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
  <img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

裁剪图库的缩略图图像

2 个答案: