css样式 高度随宽度等比变化

1. 需求：高度随宽度等比变化

有一个盒子，其宽度不固定，是随浏览器宽度动态变化的，但是盒子的高度需要始终为盒子宽度的一半。

举例说明：
宽度为100px时，高度为50px；
宽度为200px时，高度为100px；

2. 效果示例：

3. 代码示例：

（1） html部分

<div class="box">
    <div class="info"></div>
 </div>

（2） js部分

.box {
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 28%;

  .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

4. 原理说明：

• padding-top 和 padding-bottom 属性值为百分比时，是根据当前元素的宽度计算的，

举例说明：
width = 200px ; padding-top = 100% ; 则 padding-top = 200px；
width = 100% ; padding-top = 50% ; 则 padding-top的值为 width为100%时的宽度的 50%（width为100%时的宽度如果为50px，padding-top就为25px）；

5. 注意：

子元素需要相对父元素定位，同时，子元素设置为top：0、left：0，如果不设置定位，那么子元素会从父元素的右下角开始显示