裁剪图库的缩略图答案

【问题标题】：Crop thumbnail images for gallery裁剪图库的缩略图
【发布时间】：2012-10-25 16:57:06
【问题描述】：

在我的画廊中，缩略图的宽度为 240 像素，但它们的高度各不相同。有什么方法可以裁剪缩略图图像，使它们都是 150 像素高？

目前我得到了这个：

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

这可行，但只有顶行的图像看起来不错，因为它们都是对齐的。其他行上的图像未对齐，因为它们被放置在上一行图像的原始高度之下。我需要在我的 CSS 中添加什么来解决这个问题？

【问题讨论】：

标签： css image gallery crop

【解决方案1】：

您可以使用这些代码生成缩略图而无需任何裁剪 .thumbnail { 位置：相对；宽度：200px；高度：200px；溢出：隐藏； } .thumbnail img { 位置：绝对；左：50%；最高：50%；高度：100%；宽度：自动； -webkit-transform: 翻译(-50%,-50%); -ms-transform: 翻译(-50%,-50%); 变换：翻译（-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】：

我建议将它们包装在一个设置高度为 150 像素并将溢出设置为隐藏的 div 中。

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

【讨论】：