《你不知道的 CSS》之等比例縮放的盒子

參考文獻：www.w3cplus.com/css/aspect-…

你確定已經知道，對於一個 img 元素而言，你能夠單獨地修改它的 width 或者 height 屬性來設置它的大小，同時圖片的比例還可以保持不變。

以下圖所示，最上面是原始大小的圖片，下面兩張則分別是設置了 width: 50% 和 height: 50% 屬性後的樣子。

能夠看到把寬度設置爲了原來的一半的同時，圖片的高度並非保持原來的大小，而是相應的也變成了原來的一半，使得圖片仍可以保持原有的比例。同理把高度設成原來的一半也如此。

做爲對照，咱們看看單獨修改其餘元素的寬和高會產生什麼樣的效果：

上圖最左邊的藍色矩形是原始的 div 元素，以後兩個分別是對其設置了 width: 50% 和 height: 50% 屬性後的樣子。可見與 img 元素不一樣，單獨設置 div 元素的寬度（高度）時，對應的高度（寬度）並不會改變，從而致使元素的比例發生變化。這一結果相信每一個稍微對前端有些瞭解的同窗都能猜到。可是到底是什麼致使了一樣的屬性用於 img 和 div 後會產生不一樣的結果呢？

img 在元素分類中屬於 replaced （被替換的）元素。replaced 元素表示這個元素內容的顯示不是由 CSS 控制的。換句話說，對於 img 元素而言，圖片的內容並非由 CSS 定義的，而是經過其 src 屬性指向的資源決定的。不少 replaced 元素來都會有本身的固有尺寸（Intrinsic dimension），img 也不例外1。當 img 的高度改變後，瀏覽器會計算出其縮放比例，而當元素的寬度是 auto（即默認值）時，瀏覽器則以原始寬度 * 縮放比例來做爲元素的新寬度。從而使得 img 元素的比例始終保持一致。

然而這都並非這篇文章討論的重點。（那位同窗請不要說髒話，不文明

重點是什麼？重點就是題目：實現等比例縮放的盒子。

在響應式設計逐漸成爲主流的今天，流式佈局這個詞即便放在一兩年前也絕算不得是個新鮮詞彙。下面是一個佈局實例：

上圖中每一個藍色的矩形分別對應一個 div 元素，每一個元素的寬度佔窗口寬度的四分之一（圖示中爲了演示方便給每一個元素加了邊距效果）。若是不作額外處理，當窗口寬度變小時上圖的頁面會變爲以下所示：

可見每一個元素的寬度進行了縮放，但高度並無變化，看起來並非很協調。因此有些場景下咱們須要實現當窗口寬度縮放時，使得元素寬度自適應的同時，保證每一個元素的寬高比例不變。

不少同窗在我話還沒講完時，就已經紛紛掏出 JavaScript 大錘着手實現了起來。然而這個系列文章的標題是《你不知道的 CSS》，天然不會介紹 CSS 實現不了這種打本身臉的需求，並且就此例而言，使用 JavaScript 實現效果並很差，綁定 onresize 事件後在拖拽時某些星座的朋友會察覺出來些許卡頓（你試試便知），並且在 JavaScript 加載完成前是看不出效果的。

其實用 CSS 能夠很容易地實現這樣的效果，用的屬性也是咱們每一個工做日和週末（若是加班的話）都會用到的：padding-bottom。padding-bottom 有一個讓人很容易忽略的特性是當它的值是百分比形式時，百分比的基數是其所在元素的父元素的寬度而不是高度（同 padding-left 和 padding-right 同樣）。這樣解決方案也就很是明顯了：

1. 將元素的 height 設成 0，使得元素的高度等於 padding-bottom；
2. 合理設置 padding-bottom 的值。好比每一個元素的 width 是 25%，如今想讓元素的高度始終保持爲其寬度的兩倍，則 padding-bottom 的值應該設置爲 50%。

結果以下圖所示：

相應的代碼能夠參見：jsfiddle.net/luin/25BbH/…。

然而至此，這篇文章還沒完。確定會有不少同窗疑惑既然 height 被設成了 0，那麼若是元素的 overflow 爲 hidden，裏面的文字會不會由於超出了元素高度而被隱藏呢？

答案是不會。根據 CSS 2.1 規範2，overflow 只會對處於 padding edge 外面的內容生效，即只有超出了 padding 區域的內容纔會被 overflow 屬性隱藏掉。

1. 其實有一點例外的狀況是當 img 的圖片是 svg 時，它是沒有固有尺寸的。 ↩
2. www.w3.org/TR/CSS2/vis…↩

掃碼關注w3ctech微信公衆號