1、padding-bottom 如果用%來表示的話，計算是根據父元素的width的值進行計算的。
例：父元素.wrapper的width是100px，height設置為0, padding-bottom的值是50%，則該元素的高是50px
2、 百分比方法適用於的場景：一個圖片需要全部顯示出來，而且圖片本身的寬高比例不變，能夠隨着屏幕的大小進行變化。
3、實現等比縮放的效果，還可以通過vw來設置，缺點：有的瀏覽器不支持。
下面是例子中css.wrapper中可以替換為
.wrapper{
width: 100%;
height: 26.66vw;
}
下面例子可以通過屏幕的縮放來等比的改變圖片的寬高。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>padding-bottom</title> 6 <style type="text/css" rel="stylesheet"> 7 .wrapper{ 8 width: 100%; 9 height: 0; 10 /*padding-bottom的值是基於父元素的width來計算的,則padding-bottom=100%/3.75=26.66% */ 11 padding-bottom: 26.66%; 12 overflow: hidden; 13 } 14 .content{ 15 position: relative; 16 width: 100%; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="wrapper"> 22 <!-- 子元素的圖片的寬為375px,高為100px,則算出來的寬高比為375/100=3.75 --> 23 <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="圖片"> 24 </div> 25 </body> 26 </html>