[老法新用]使用padding-top:(percentage)实现响应式背景图片

处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的 > 元素，其高度会随着宽度的变化自动调整，且其宽高比不变。如果想在背景图片中实现同样的效果，我们必须先解决如何保持HTML元素的宽高比。

固定宽高比

我们将用到一个保持元素宽高比的技巧：为元素添加垂直方向的padding值，padding值使用百分比。这是因为垂直方向的padding取值使用百分比时，其值是相对于包含块的宽度而定的.

假设我们有一张800*450px的图片，我们需要创建一个元素在其宽度变化时，它的宽高比仍保持16:9。
代码如下：

.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属性，它代表元素在宽度为零时的高度。代码如下：

.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 */
}

原文地址