基本原理
元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。
使用场景
通常用在图片宽度自适应，并且需要保持高宽比的地方，例如商品列表页面。示例代码如下：
<div class="imgc"> <img src="..."> </div>
.imgc { width: 100%; position: relative; padding-top: 75%; > img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } }
或者
.imgc { padding: 0 50% 66.66% 0; }
原文：http://www.cnblogs.com/mengff/p/7749773.html