网格图像库-宽度是自适应的，但也需要高度也要自适应

Question

我的网格图像库每行有四个图像。 CSS中的width：25％使宽度响应，但是我需要高度也要响应。 目前，我的身高为180px。 我可以将其设置为百分比以使其像宽度一样响应吗？ 我已经尝试过，但是当我将其设置为百分比时它不起作用。 仅当我将height：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示例。