我们知道图片高度为auto时，宽高比会以图片原始尺寸的比例缩放，但如果每个元素里无图片且内容行数不固定或者每个元素里的图片宽高比不一致时，如下图，该如何实现每个<li>的宽高比例不变且一致呢？我们从自适应的角度探讨这个问题，即每个<li>的宽度为：31.3333%。目前通过CSS实现效果就有两种方法，在实际项目是可根据情况合理使用其中一种方法。

使用VW单位实现

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%），假如我们要实现每个<li>的宽高比例为 4:3，通过计算就可以知道高度应设为：23.5vw ≈ 31.3333 * 3 / 4，具体CSS样式如下：

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; 
}