使用padding代替高度實現背景圖片高度按比例自適應

本篇文章由：http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionately/

高度百分比

將高度設置成百分比時，其高度是基於父元素來定的，設置成50%，就是將該元素高度設置成 父元素的高度值 x 50%。

可是將高度設置成百分比時，每每是不生效的！高度依然爲0，這是爲啥? 道理很簡單，那就是父元素的高度也爲0。

因此這就須要講到瀏覽器對寬度及高度是如何計算的。

瀏覽器在計算有效寬度時會考慮瀏覽器窗口的寬度，若是沒有設置絕對寬度，就會自動將頁面內容橫向平鋪填滿整個窗口。

然而瀏覽器並不計算內容的高度，除非內容超過了視窗高度，造成滾動條。

或者給頁面設置一個絕對高度，否則的話，瀏覽器就會將內容按文檔流往下堆砌，也就是高度值爲缺省值 auto。

因此若是基於缺省值 auto 來設置百分比高度的話，一定是無效高度。

顯然只須要給父元素指定一個絕對高度，就沒什麼問題了。

但是在實際應用當中，高度一般都不是固定的，不會把高度寫死，何解？

這就能夠用到，本文給你們介紹的方法，接着往下看。。。

使用 padding 代替高度

爲何使用內邊距代替高度？

內邊距，顧名思義就是元素邊框與元素內容之間的空白區域。

因此內邊距愈來愈大時，元素的高度也會不斷增大。

設想一下，若是一個元素的內容爲空，內邊距的高度，是否是就是該元素的高度呢？

答案是必須的！

那麼咱們是否是能夠，將高度替換爲內邊距，而且以百分比設置它的值呢？

答案也是必須的！

這裏可能有些朋友會有疑問了，若是設置成百分比的話，同樣是基於父元素成百分比的呀？

對，沒錯，是基於父元素，可是 內邊距 padding 是基於父元素的寬度的百分比的內邊距

注意重點是 基於寬度 ！

因此無論是 padding-left 和 padding-right 仍是 padding-top 和 padding-bottom 都是基於父元素寬度的百分比。

理論說完，我們就來實踐一下

實踐使用

這裏就以實際遇到的狀況作爲例子來實踐這個功能：

在頁面中添加圖片時，若是但願圖片的寬高自適應的話，一般只須要將圖片的寬度設置成百分比便可 (img 標籤自身就是按比例縮放圖片)，

就是當你不能使用 img 標籤的時候(使用 div 標籤，以背景圖片的形式加入圖片)，又該怎麼辦呢？

接下來我們就用 padding 去實現這個需求。

那麼問題又來了。。。

若是使用 padding 代替高度(由於是代替高度，因此使用 padding-top 或 padding-bottom 其中之一便可)，那麼百分比應該如何設置呢？

首先，咱們須要計算出圖片的寬高比例，本文案例中使用了一張 640x400 的圖片，寬高比就是 1.6

假設將圖片的寬度設置爲 50%，那麼圖片的高度就是 50% / 1.6 = 31.25%

因此圖片的高度按比例縮放就是 基於父元素寬度的 31.25%

來看看實際應用。

HTML

<img class="autoHeightImg" src="4.jpg" alt="4.jpg" />
<div class="autoHeightDiv"></div>

CSS

.autoHeightImg {
    width: 50%;
}
.autoHeightDiv {
    width: 50%;
    height: 0;
    padding-top: 31.25%;
    background-image: url(4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

效果圖

插入一張原圖(使用 img 標籤按比例顯示)做爲比較

這是使用 padding 代替高度以後按比例顯示的效果

根據效果圖能夠看出，高度稍微會有微小的誤差，小於0.01%，幾乎能夠忽略不記了！

這樣需求就實現了，代碼也比較簡單，固然使用 padding-top 和 padding-bottom 都是，同樣能夠實現，同樣的效果。