纯 CSS 实现高度与宽度成比例的效果

首先需要知道，一个元素的  padding  ，如果值是一个百分比，那这个百分比时相对于其父元素的宽度而言的，即使对于  padding-bottom  和  padding-top  也是如此。

另外在计算overflow时，是将元素的内容区域（即  width  /  height  对应的区域）和 padding 区域一起计算的。换句话说，即使将元素的  overflow  设置为  hidden  ，“溢出”到 padding 区域的内容也会照常显示。

综上所述，我们可以使用  padding-bottom  来代替  height  来实现高度与宽度成比例的效果。因为item元素的宽度是其父元素宽度的21%，所以我们将  padding-bottom  设置为它的1.618倍，即33.98%。同时将其  height  设置为  0  以使元素的“高度”等于  padding-bottom  的值，从而实现需要的效果。 

.item {
    float:left;  
    width:21%;
    height:0;
    padding-bottom:33.98%;
}

当 item 元素中是图片但要保持的宽高比和图片本身的宽高比不同

.item {
    width:100%;
    height:0;
    padding-bottom:50%;
    overflow:hidden;
}
.item img {
    width:100%;
}

 原文：http://zihua.li/2013/12/keep-height-relevant-to-width-using-css