一、CSS百分比padding都是相對(duì)寬度計(jì)算的

在默認(rèn)的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對(duì)于寬度計(jì)算的，這個(gè)和top, bottom等屬性的百分比值不一樣。

這么設(shè)計(jì)的原因在我的新書(shū)（應(yīng)該不出幾個(gè)月就要出版了）中會(huì)有說(shuō)明，這里不展開(kāi)。

對(duì)于padding屬性而言，任意方向的百分比padding都現(xiàn)對(duì)于寬度計(jì)算可以讓我們輕松實(shí)現(xiàn)固定比例的塊級(jí)容器，舉個(gè)例子，假設(shè)現(xiàn)在有個(gè)<div>元素：

div { padding: 50%; }

或者：

div { padding: 100% 0 0; }

或者：

div { padding-bottom: 100%; }

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

這種能固定比例的特性什么作用呢？

對(duì)于絕大多數(shù)都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因?yàn)閳D片原始尺寸它是固定的。在傳統(tǒng)的固定寬度的布局下，我們會(huì)通過(guò)給圖片設(shè)定具體的寬度和高度值，來(lái)保證我們的圖片占據(jù)區(qū)域穩(wěn)固；但是在移動(dòng)端或者在響應(yīng)式開(kāi)發(fā)情況下，圖片最終展現(xiàn)的寬度很可能是不確定的，例如手機(jī)端的一個(gè)通欄廣告，iPhone7下寬度是375，iPhone7 Plus下是414，還有360等尺寸，此時(shí)需要的不是對(duì)圖片進(jìn)行固定尺寸設(shè)定，而是比例設(shè)定。

通常有如下一些實(shí)現(xiàn)：

1. 固定一個(gè)高度，然后使用background-size屬性控制，如下：

.banner { height: 40px; background-size: cover;}

實(shí)時(shí)效果如下：

可以看到隨著寬度的變化，總會(huì)有部分圖片區(qū)域（寬度或高度）無(wú)法顯示，并不是完美的做法。

2. 使用視區(qū)寬度單位vw，如下：

.banner { height: 15.15vw; background-size: cover;}

如果對(duì)兼容性要求不是很高，使用vw也是一個(gè)不錯(cuò)的做法，至少理解起來(lái)要更輕松一點(diǎn)。

但是，如果我們的圖片不是通欄，而是需要離左右各1rem的距離，此時(shí)，我們的CSS代碼就要啰嗦點(diǎn)了，想要保持完美比例，就使用借助CSS3 calc()計(jì)算：

.banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover;}

如果，圖片距離兩側(cè)的寬度是動(dòng)態(tài)不確定的，則，此時(shí)calc()也捉襟見(jiàn)肘了，但，恰恰是普普通通其貌不揚(yáng)的padding屬性，其兼容性和適應(yīng)性都一級(jí)棒。

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

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

此時(shí)無(wú)論圖片的外部元素怎么變動(dòng)，比例都是恒定不變的。

二、CSS百分比padding與寬度自適應(yīng)圖片布局

但是有時(shí)候我們的圖片是不方便作為背景圖呈現(xiàn)的，而是內(nèi)聯(lián)的<img>，百分比padding也是可以輕松應(yīng)對(duì)的，求套路是比較固定的，圖片元素外面需要一個(gè)固定比例的容器元素，例如下面的HTML結(jié)構(gòu)：

<div> <img src=""banner.jpg></div>

.banner元素同樣負(fù)責(zé)控制比例，然后圖片填充.banner元素即可，CSS代碼如下：

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

效果就達(dá)成了！

眼見(jiàn)為實(shí)，去年起點(diǎn)中文網(wǎng)手機(jī)版諸多頁(yè)面的通欄廣告就都是這么實(shí)現(xiàn)的，最終的效果參見(jiàn)下面的gif截圖（如果圖無(wú)法顯示，可以評(píng)論反饋）：

可以看到，無(wú)論屏幕寬度多寬，我們的廣告圖片比例都是固定的，不會(huì)有任何剪裁，不會(huì)有任何區(qū)域缺失，布局就顯得非常有彈性，也更健壯。

————-

其實(shí)，我之前一直低估百分比padding的實(shí)際應(yīng)用價(jià)值，因?yàn)橛?code>vw單位的存在，畢竟理解vw看上去要更簡(jiǎn)單一些，所以，一直就沒(méi)做相關(guān)技巧的介紹。但是，隨著圖片相關(guān)布局處理越來(lái)越多，我發(fā)現(xiàn)，百分比padding的實(shí)用價(jià)值要比想象的大，要比vw單位適用場(chǎng)景更多，兼容性更好（百分比特性IE6+支持，圖片100%覆蓋IE8+支持）。

對(duì)于復(fù)雜布局，如果圖片的寬度是不固定的自適應(yīng)的，我們通常會(huì)想到這么一個(gè)取巧的做法，就是只設(shè)定圖片的寬度，例如：

img { width: 100%; }

此時(shí)瀏覽器默認(rèn)會(huì)保持圖片比例顯示，圖片寬度大了，高度也跟著一起變大；圖片寬度小了，高度也跟著一起變小。開(kāi)發(fā)人員似乎無(wú)需關(guān)心圖片真實(shí)比例是怎樣的。

然而這種技巧有一個(gè)非常不好的體驗(yàn)問(wèn)題，那就是隨著頁(yè)面加載的進(jìn)行，圖片占據(jù)的高度會(huì)有一個(gè)從0到計(jì)算高度的圖片變化，視覺(jué)上會(huì)有明顯的元素跳動(dòng)，代碼層面會(huì)有布局重計(jì)算。

所以對(duì)圖片高寬進(jìn)行同時(shí)約定還是有必要的，但是同時(shí)要保證寬度自適應(yīng)，似乎有點(diǎn)難度。記住，如果遇到這種需求場(chǎng)景，沒(méi)有比百分比padding布局更好的做法！

縮小瀏覽器寬度可以看到不同寬度下的布局效果，Gif效果截圖如下：

此demo難點(diǎn)就是圖片自適應(yīng)同時(shí)保持比例，以及頁(yè)面刷新的時(shí)候沒(méi)有布局穩(wěn)固不晃動(dòng)，其核心HTML和CSS代碼如下：

<div>  <img src="./150x200.png"></div>

.works-item-t { padding-bottom: 133%; position: relative;}.works-item-t > img { position: absolute; width: 100%; height: 100%;}

可以看到，當(dāng)把垂直方向padding值只使用padding-bottom表示的時(shí)候，如果沒(méi)有text-align屬性干擾，<img>元素的left:0;top:0是可以省略的。

對(duì)于這種圖片寬度100%容器，高度按比例的場(chǎng)景，padding-bottom的百分比值大小就是圖片元素的高寬比，就這么簡(jiǎn)單。

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

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