最近在做一個產品列表頁面，布局如右圖所示。頁面中有若干個 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; }

頁面效果見 http://jsfiddle.net/luin/25BbH/7/，拖動窗口調整頁面寬度，item 元素始終保持恆定的寬高比。

具體快去http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/了解，同時感謝樓主的分享。

demo:

1
2
3
4
5
6
7
8
9
10
11
12
<! DOCTYPE  html>
< html >
     < head >
         < meta  charset="UTF-8">
         < title ></ title >
     </ head >
     < body >
         < div  class="aaa" style="width:80%;height:0;padding-bottom: 45%;margin: 0 auto;">
             < img  src="../style/img/login_bg1.jpg"/ style="width:100%;">
         </ div >
     </ body >
</ html >