高度隨寬度等比變化

有一個盒子，其寬度不固定，是隨瀏覽器寬度動態變化的，但是盒子的高度需要始終為盒子寬度的一半

舉例說明：
寬度為100px時，高度為50px；
寬度為200px時，高度為100px；

 代碼示例

 1 <div class="box">
 2     <div class="info"></div>
 3  </div>
 4 
 5 // css 部分
 6 .box {
 7   position: relative;
 8   width: 50%;
 9   height: 0;
10   padding-top: 28%;
11  
12   .info {
13     position: absolute;
14     top: 0;
15     left: 0;
16     width: 100%;
17     height: 100%;
18   }
19 }

原理說明：

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