本篇文章由：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 都是，一樣可以實現，一樣的效果。