如何使DIV高度随着宽度缩放而缩放？

现在很多网站都开始使用了响应式配置，响应式在调整的时候我们最常用的是使用百分比来控制容器的大小，但是一般来说都是使用width:100%来自适应宽度，那么如何使容器（也就是DIV）的高度也随着宽度的缩小而缩小呢？

最常用的方法是通过背景图标的cover属性。

#banner .bd li {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center 0;
background-position: 50% 50%;
-webkit-background-size: 100%;
padding-top: 42%;
}

类似上述代码，很显然是一个banner 图的属性，那么这个图像调用的是背景图像的话，我们就让他的属性为布满整个div,其中padding-top的比例一般为图片的高度除以图片的宽度计算而来。

其实这个padding-top的百分比让我们弄出来的这种效果确实不明白他真正的来源，如果有css高手的话可以不防给大家解释一下其中的原理。