純 CSS 實現高度與寬度成比例的效果
最近在做一個產品列表頁面，佈局如下圖所示。頁面中有若干個 item，其中每個 item 都向左浮動，幷包含在自適應瀏覽器視窗寬度的父元素中。
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
 
;
}