高度随宽度等比变化

高度随宽度等比变化

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

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

 代码示例

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

// css 部分
.box {
  position: relative;
  width: 50%;
  height: 0;
  padding-top: 28%;
 
  .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

原理说明：

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

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

注意：

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

原文链接：https://blog.csdn.net/m0_65041204/article/details/129491907