需求
在一个产品列表中，有若干个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的值。
