使用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 */
}