CSS实现固定比例宽高缩放

CSS固定比例缩放

需求
在一个产品列表中，有若干个item，每个item都左浮，并包含在自适应浏览器宽度的父元素中。在保持item宽高比例固定的情况下，使item元素可以和父元素同比缩放。

方法

.item{
    float: left;
    width: 20%;
    height: 0;
    padding-bottom: 40%;   
}

上面代码实现了item元素宽高比例固定为1 : 2，并且与其父元素同比缩放。

如果一个元素的height值是百分比，这个百分比值是相对其父元素的宽度而言的，即使对padding-bottom和padding-top也是如此；
计算overflow时，元素内容区域（width和height对应区域）和padding区域一起计算，即使overflow: hidden;，padding区域也会显示；
综上，可以用padding-bottom代替height，将height的值设为0，使元素的高度等于padding-bottom的值。