純 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