網格圖像庫 - 寬度是響應式的，但也需要高度來響應。

Question

我的網格圖像庫每行有四個圖像。寬度：在CSS中的25％使寬度響應，但我需要的高度也是響應。目前我的身高爲180px。我可以將它設置爲一個百分比來使其響應寬度？我試過，但是當我將它設置爲百分比時，它不起作用。它只適用於我移動高度：x％到line1 img/line2 img，但隨後圖像被壓扁。

<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:180px; 
} 
.line1 img{ 
width:25%; 
} 
.line2{ 
overflow:hidden;  
height:180px; 
} 
.line2 img{ 
width:25%; 
} 

Answer 1

同時設置.line1{ height: auto;}和.line1{ height: auto;這將保持它的響應。 檢查jsfiddle示例。