处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的
<img> 元素，其高度会随着宽度的变化自动调整，且其宽高比不变。如果想在背景图片中实现同样的效果，我们必须先解决如何保持HTML元素的宽高比。
固定宽高比
我们将用到一个保持元素宽高比的技巧：为元素添加垂直方向的padding值，padding值使用百分比。这是因为垂直方向的padding取值使用百分比时，其值是相对于包含块的宽度而定的.
假设我们有一张800*450px的图片，我们需要创建一个元素在其宽度变化时，它的宽高比仍保持16:9。
代码如下：
<div class="column">
<div class="figure"></div>
</div>
.column {
/* 必须要保证图片的宽度至少要与元素的max-width一样大 */
max-width: 800px;
}
.figure{
padding-top: 56.25%; /* 450px/800px =0.5625 */
background-image: url(http: //domain.com/img/sample.jpg);
backgorund-size: cover; /*跟随元素一起自动缩放*/
background-position: center; /* IE7/8 */
}
流动宽高比
假设有一张在桌面浏览器下显示很好的宽屏图片，在移动设备上我们不想使用相同的宽高比，要不然图片会很小。又或者是我们不想使用相同的高度，因为图片会过高。
这个效果可以通过减少padding 的百分比值和为元素设置一个高度来实现。假设大图是800px * 200px，当元素宽减少到300px 的时候，高度为150px。现在我们计算height和padding的属性值。
上图显示了两个尺寸的关系。坡度线（slop)对应于padding属性，开始高度（start height)对应于height属性，它代表元素在宽度为零时的高度。代码如下：
<div class="column">
<figure class="fluidratio"></figure>
</div>
.column {
max-width: 800px;
}
.fluidratio {
padding: 10%; /* slope */
height: 120px; /* start height */
background-image: url(http://domian.com/img/sample.jpg);
background-cover: cover;
background-position: center; /* IE 7/8 */
}
