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

Question

My grid image gallery has four images on each line. The width:25% in the CSS makes the width responsive but I need the height to also be responsive. At the moment I have the height as 180px. Could I set it as a percentage to make it responsive like the width? I've tried but when I set it as a percentage it doesn't work. It only works if I move height:x% to line1 img/line2 img, but then the image becomes squashed.

<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

Set both .line1{ height: auto;} and .line1{ height: auto; this will keep it responsive. Check the jsfiddle example.