item 元素的 CSS 定義如下：
.item { float: left; margin: 10px 2%; width: 21%; }
這時遇到的一個需求：在保持 item 元素寬高比恆定（如高是寬的 1.618 倍）的情況下，使得 item 元素可以和父元素同比縮放。 我們知道，如果當 item 元素是圖片，同時需要保持的寬高比恰好為圖片本身的寬高比時，可以設置 item 的 height 為 auto 即可輕松實現這個需求。然而當 item 元素不是圖片或者要保持的寬高比和圖片本身的寬高比不同時，這個需求顯得很難直接用 CSS 實現。
為此我放棄 CSS，直接用 JavaScript 綁定 window 的 onresize 事件來動態獲取每個 item 的寬度，從而計算並設置其高度。
我一直在使用這個解決方案，直到今天調整樣式時，突然想到這個需求竟然是可以只使用 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 元素的 CSS 樣式為：
.item { float: left; margin: 10px 5%; padding-bottom: 33.98%; width: 21%; height: 0; }
頁面效果見 http://jsfiddle.net/luin/25BbH/7/，拖動窗口調整頁面寬度，item 元素始終保持恆定的寬高比。
同樣，這個解決方案也自然支持前文說的“當 item 元素是
圖片但要保持的寬高比和圖片本身的寬高比不同”的情況，具體見我在 Ruby China 上的一篇回復：圖片 CSS：怎樣才能“響應式+固定寬高比例”？
轉自 http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/