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

我的网格图像库每行有四个图像。宽度：CSS中的25%使宽度响应，但我需要高度也响应。目前我的高度是180px。我可以将它设置为一个百分比，使它像宽度一样响应吗？我试过了，但当我把它设为一个百分比时，它就不起作用了。仅当我将“高度：x%”移动到第1行img/第2行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%;
}

.line1{
溢出：隐藏；
高度：180像素；
}
.line1 img{
宽度：25%；
}
.line2{
溢出：隐藏；
高度：180像素；
}
.line2 img{
宽度：25%；
}

同时设置

.line1{height:auto；}

和

.line1{height:auto；

这将使其保持响应。 检查示例