HTML/CSS
如何用CSS实现自适应宽高等比例的容器
PetitQ
我们知道图片高度为 auto 时，宽高比会以图片原始尺寸的比例缩放，但如果每个元素里无图片且内容行数不固定或者每个元素里的图片宽高比不一致时，如下图，该如何实现每个
也想出现在这里？联系我们吧
VW 单位实现
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%），假如我们要实现每个
li {float: left;
width: 31.3333%;
margin: 1%;
height: 23.5vw;
}
这个方法适合在移动端，vw 属于 CSS3，可兼容 安卓 4.4+，IOS7.0+，如需兼容旧版就不适用了。
Padding 实现
padding 与 margin 值设置为百分比是以父元素宽度的百分比，即使对 padding-top 和 padding-bottom 也是如此，而 padding 是计算在宽高里的，即设置了 overflow: hidden; 并不会把 padding “溢出”，同样我们需实现每个<li>的宽高比例为 4:3，综上所述，通过计算就就可以把 padding-bottom 的值设为： 23.5% ≈ 31.3333 * 3 / 4，具体 CSS 样式如下：
li {float: left;
width: 31.3333%;
margin: 1%;
height: 0;
padding-bottom: 23.5%;
overflow: hidden;
}
这个方法无兼容性问题，可兼容旧版浏览器。
如果<li>里有图片则可以稍改动，如下：
li {float: left;
width: 31.3333%;
margin: 1%;
}li .pic {
height: 0;
padding-bottom: 75%;
overflow: hidden;
}li .pic img {
width: 100%;
height: auto;
}
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
