今天在开发时遇到一个问题，如何使高度等于百分比的宽度。原本的想法是通过js获取，但是这个方法感觉太麻烦，希望能用css做的事情就不要js去做。
完美的方案是通过padding来实现的。
原理
padding的定义:
padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
取值
<长度>
可指定非负的固定宽度. See <length> for details.
<百分比>
相对于包含块的宽度
看最后一句话“相对于包含块的宽度”，意思是padding的百分比基数是包含块的宽度（父元素的宽度），如果父元素是100px，padding-top: 20%;就相当于padding-top: 20px。
应用
接下来根据这一特性开始实现让div的高度等于宽度。
假设是一个div占据屏幕中间90%的区域显示，图片比例是1:1。
首先画一个90%宽，比例为1:1的区域
div{
width: 90%;
height: 0;
margin: 0 auto;
padding-top: 90%;
}图片要放置在这个区域，但是发现高度为0，通过绝对定位实现，
div>img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}假设现在的图片比例是4:3，我们要怎么计算呢 90% / 4 * 3 = 67.5%，其他比例安装这个公式去计算就好。
下面是完整的代码和截取的一个小例子：
<div class="banner"> <img src="xxx.jpg"/> </div>
CSS
.banner{
width: 90%;
height: 0;
margin: 0 auto;
padding-bottom: 90%;
padding-bottom: 67.5%;
position: relative;
}
.banner > img{
position: absolute;
width: 100%;
height: 100%;
}
