CSS百分比padding實現比例固定圖片調適型配置

標籤：back   ima   方便   有一個   要求   image   size   you   使用   

本文轉自 張鑫宇（大神的很多文章都拜讀過，寫的很好，清晰明了，贊）的 https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/

一、CSS百分比padding都是相對寬度計算的

在預設的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對於寬度計算的，這個和top, bottom等屬性的百分比值不一樣。

這麼設計的原因在我的新書（應該不出幾個月就要出版了）中會有說明，這裡不展開。

對於padding屬性而言，任意方向的百分比padding都現對於寬度計算可以讓我們輕鬆實現固定比例的塊級容器，舉個例子，假設現在有個<div>元素：

div { padding: 50%; }

或者：

div { padding: 100% 0 0; }

或者：

div { padding-bottom: 100%; }

則這個<div>元素尺寸就是一個寬高1:1的正方形，無論其父容器寬度是多少，這個<div>元素總能保持比例不變。

對於絕大多數都布局，我們並不要求非要比例固定，但是有一種情況例外，那就是圖片，因為圖片原始大小它是固定的。在傳統的固定寬度的布局下，我們會通過給圖片設定具體的寬度和高度值，來保證我們的圖片佔據地區穩固；但是在移動端或者在響應式開發情況下，圖片最終展現的寬度很可能是不確定的，例如手機端的一個通欄廣告，iPhone7下寬度是375，iPhone7 Plus下是414，還有360等尺寸，此時需要的不是對圖片進行固定尺寸設定，而是比例設定。

3. 使用百分比padding，如下：

.banner {    padding: 15.15% 0 0;    background-size: cover;}

二、CSS百分比padding與寬度自適應圖片布局

但是有時候我們的圖片是不方便作為背景圖呈現的，而是內聯的<img>，百分比padding也是可以輕鬆應對的，求套路是比較固定的，圖片元素外面需要一個固定比例的容器元素，例如下面的HTML結構：

<div class="banner">  <img src=""banner.jpg></div>
.banner元素同樣負責控制比例，然後圖片填充.banner元素即可，CSS代碼如下：

.banner {    padding: 15.15% 0 0;    position: relative;}.banner > img {    position: absolute;    width: 100%; height: 100%;    left: 0; top: 0;}

其實，我之前一直低估百分比padding的實際應用價值，因為有vw單位的存在，畢竟理解vw看上去要更簡單一些，所以，一直就沒做相關技巧的介紹。但是，隨著圖片相關布局處理越來越多，我發現，百分比padding的實用價值要比想象的大，要比vw單位適用情境更多，相容性更好（百分位元性IE6+支援，圖片100%覆蓋IE8+支援）。

對於複雜布局，如果圖片的寬度是不固定的自適應的，我們通常會想到這麼一個取巧的做法，就是只設定圖片的寬度，例如：

img { width: 100%; }
此時瀏覽器預設會保持圖片比例顯示，圖片寬度大了，高度也跟著一起變大；圖片寬度小了，高度也跟著一起變小。開發人員似乎無需關心圖片真實比例是怎樣的。

然而這種技巧有一個非常不好的體驗問題，那就是隨著頁面載入的進行，圖片佔據的高度會有一個從0到計算高度的圖片變化，視覺上會有明顯的元素跳動，代碼層面會有布局重計算。

所以對圖片高寬進行同時約定還是有必要的，但是同時要保證寬度自適應，似乎有點難度。記住，如果遇到這種需求情境，沒有比百分比padding布局更好的做法！

對於這種圖片寬度100%容器，高度按比例的情境，padding-bottom的百分比值大小就是圖片元素的高寬比，就這麼簡單。

但，有時候，圖片寬度並不是100%容器的，例如，圖片寬度50%容器寬度，圖片高寬比4:3，此時，CSS垂直方向百分比就666了，如下：

.img-box {    padding: 0 50% 66.66% 0;}

CSS百分比padding實現比例固定圖片調適型配置