首頁 > 文章 > web前端 > 詳解CSS百分比padding製作圖片自適應佈局

詳解CSS百分比padding製作圖片自適應佈局

小云云原創: 2017-12-26 09:39:002263瀏覽

本文主要和大家分享詳解CSS百分比padding製作圖片自適應佈局，css知識點：當padding/margin取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！

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

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

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

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

p { padding: 50%; }

或：

p { padding: 100% 0 0; }

或：

p { padding-bottom: 100%; }

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

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

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

通常有以下一些實作：

1. 固定一個高度，然後使用background-size屬性控制，如下：

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

即時效果如下：

可以看到隨著寬度的變化，總是會有部分圖片區域（寬度或高度）無法顯示，並不是完美的做法。

2. 使用視區寬度單位vw，如下：

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

如果對相容性要求不是很高，使用vw也是一個不錯的做法，至少理解起來要更輕鬆一點。

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

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

如果，圖片距離兩側的寬度是動態不確定的，則，此時calc()也捉襟見肘了，但，恰恰是普普通通其貌不揚的padding屬性，其兼容性和適應性都一級棒。

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

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

此時無論圖片的外部元素怎麼變動，比例都是恆定不變的。

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

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

<br>

<p class="banner">
 <img src=""banner.jpg>
</p>

.banner元素同樣負責控制比例，然後圖片填入.banner元素即可，CSS程式碼如下：

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

效果就達成了！

眼見為實，去年起點中文網手機版諸多頁面的通欄廣告就都是這麼實現的，最終的效果參見下面的gif截圖（如果圖無法顯示，可以評論反饋）：

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

————-

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

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

img { width: 100%; }

此时浏览器默认会保持图片比例显示，图片宽度大了，高度也跟着一起变大；图片宽度小了，高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。

然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。

所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！

缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：

此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动，其核心HTML和CSS代码如下：

<br>

<p class="works-item-t">
  <img src="./150x200.png">
</p>

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

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，a1f02c36ba31691bcfe87b2722de723b元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

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

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

詳解CSS百分比padding製作圖片自適應佈局

相關文章