當一個div盒子的寬度爲百分比時，如何使盒子按等比例縮放？
我開始的想法是獲取盒子寬度，然後將盒子寬度按比例計算得到高度，這樣盒子就可以等比例縮放了。
但是遇到一個問題，盒子寬度爲百分比，我們不能直接獲取到盒子寬度，如果用js去獲取盒子寬度又太麻煩，最後發現了css的padding屬性。
padding屬性的百分比都是基於父元素的width值。
/* 基於父元素的width */
padding-left: 100%;
/* 基於父元素的width而不是height */
padding-top: 100%;
注意：padding的百分比不管是水平方向還是垂直方向都是基於父元素的width，所以我們利用padding-top設置百分比將盒子撐起來就保證了寬高比。
我們可以利用僞元素設置padding撐開盒子，然後在用絕對定位消除僞元素的影響（僞元素不能設置絕對定位，否則不會撐開盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
display: flex;
width: 80%;
border: 1px solid #000;
}
.item{
position: relative;
width: 50%;
border: 1px solid #000;
}
.item::before{
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
.test{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<div class="test">
1:1
</div>
</div>
<div class="item"></div>
</div>
</body>
</html>