在响应式画廊中裁剪图像高度答案

【问题标题】：Cropping image height in responsive gallery在响应式画廊中裁剪图像高度
【发布时间】：2012-11-14 06:50:14
【问题描述】：

我使用以下代码使我的图片库具有响应性：

<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg" />
</div>

<div class="line2">
<img src="image5.jpg" alt="image5.jpg" />
<img src="image6.jpg" alt="image6.jpg" />
<img src="image7.jpg" alt="image7.jpg" />
<img src="image8.jpg" alt="image8.jpg" />
</div>

.line1 { 
overflow:hidden; 
height:auto; 
}
.line1 img { 
width:25%; 
}
.line2 { 
overflow:hidden; 
height:auto; 
}
.line2 img { 
width:25%; 
}

我很高兴响应能力正常，因为这正是我想要的。但是，由于图像大小不同，结果是这样的：http://i50.tinypic.com/2dm9yms.png，我宁愿这样，这样可以裁剪图像：http://i46.tinypic.com/mm4xv6.png

我需要在我的 CSS 中进行哪些更改才能获得这样的效果？

【问题讨论】：

您是否在jsfiddle.net 上复制此问题？
您无法使用 CSS 裁剪图像
@TomSarduy 但是你可以把它包装起来，让父母拥有overflow: hidden
@JuanMendes：是的，但这是一个不同的问题
@TomSarduy 为什么？它达到了 OP 要求的结果。

标签： html css responsive-design image

【解决方案1】：

如果你可以给你的 div 一个固定的高度，它会起作用。另外，你不应该有 line1 和 line2 类它应该只是 line，注意你在复制你的 CSS

.line {
   height: 80px;
   overflow: hidden
}

【讨论】：