使用PADDING-TOP:(PERCENTAGE)實現響應式背景圖片

處理響應式佈局中背景圖片的簡單方法是等比例縮放背景圖片。咱們知道寬度設爲百分比的  <img> 元素，其高度會隨着寬度的變化自動調整，且其寬高比不變。若是想在背景圖片中實現一樣的效果，咱們必須先解決如何保持HTML元素的寬高比。
固定寬高比
咱們將用到一個保持元素寬高比的技巧：爲元素添加垂直方向的padding值，padding值使用百分比。這是由於垂直方向的padding取值使用百分比時，其值是相對於包含塊的寬度而定的[參考Box model].這個技巧最先在Creating Intrinsic Ratios for Video一文中用來建立固有比率的視頻，查看demo.
假設咱們有一張800*450px的圖片，咱們須要建立一個元素在其寬度變化時，它的寬高比仍保持16:9.代碼以下：
1
2
3
<div class="column">
  <div class="figure"></div>
</div>
1
2
3
4
5
6
.column{
  max-width: 800px;
}
.figure{
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}
 本身動手試試吧 demo
添加背景圖片
上面咱們實現了元素縮放並保持寬高比。可是此時若是咱們添加了背景圖片，它並不能跟隨元素一塊兒自動縮放。還須要添加background-size:cover.使用這個屬性讓背景鋪滿元素的缺點是IE8及如下瀏覽器不支持，爲了使IE下的效果能夠接受，能夠使用background-position將背景圖片居中顯式。咱們必需要保證圖片的寬度至少要與元素的max-width同樣大。這樣的話元素的寬度永遠不會比圖片大，若是元素小於圖片時，圖片將被裁剪。
1
2
3
4
5
6
7
8
9
10
<a class="titlelnk" href="www.changtu.com/chepiao/baodingshi-nanjingshi.html" target="_blank">保定到南京的汽車</a>
div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}
figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
  background-image: url（http://domain.com/img/sample.jpg）；
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}