html - 在响应式图库中裁剪图像高度

Question

我使用以下代码使我的图片库具有响应能力:

<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 中更改哪些内容才能达到这样的效果？

Answer 1

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

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