html - 网格图像库 - 宽度响应但也需要高度响应

标签 html css image gallery responsive-design

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

最佳答案

同时设置 .line1{ height: auto;}.line1{ height: auto; 这将使它保持响应。 检查jsfiddle示例。

关于html - 网格图像库 - 宽度响应但也需要高度响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13567852/

相关文章:

javascript - 如何获取数组文本框中文本框的键(索引)值

html - float div 内的文本换行问题

html - CSS3 箭头动画不起作用

Java,根据自己的功能快速图像变形

image - 在哪里更好地存储网站图片

java - 以编程方式更改联系人图片

php - 获取 JSON - JQuery 和 PHP

java - 使用 <s :doubleselect> 时的 Struts 2 HTML 问题

javascript - Angular 网络应用程序 : Splash screen is not rendered and browser is busy fetching the js files

javascript - javascript 中的 webkit 转换语法?