在響應式畫廊中裁剪圖像高度

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
}