网格图库 - 宽度响应但需要高度才能响应

时间:2012-11-26 15:24:14

标签: html css image gallery responsive-design

我的网格图库每行有四张图片。 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%;
}

1 个答案:

答案 0 :(得分:0)

设置.line1{ height: auto;}.line1{ height: auto;这将使其保持响应。 查看jsfiddle示例。