前端css实现高度等于宽度

今天在开发时遇到一个问题，如何使高度等于百分比的宽度。原本的想法是通过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="https://www.mbkfw.com/static/image/lazy.gif" class="lazy" original=""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%;
}