方法一：padding
width: 50%;
height: 0;
padding-bottom: 25%;
複製程式碼一個元素的 padding，如果值是一個百分比，那這個百分比是相對於其父元素的寬度而言的，padding-bottom 也是如此。
使用 padding-bottom 來代替 height 來實現高度與寬度成比例的效果，將 padding-bottom 設定為想要實現的 height 的值。同時將其 height 設定為 0 以使元素的“高度”等於 padding-bottom 的值，從而實現需要的效果。
方法二：vw,vh
width: 50vw;
height: 25vw;
複製程式碼根據CSS3規範,視口單位主要包括以下4個:
- vw : 1vw 等於視口寬度的1%
- vh : 1vh 等於視口高度的1%
- vmin : 選取 vw 和 vh 中最小的那個
- vmax : 選取 vw 和 vh 中最大的那個
用視口單位度量，視口寬度為100vw，高度為100vh。
例如，在桌面端瀏覽器視口尺寸為650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支援0.5px，那麼實際渲染結果可能是7px。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css">
<style>
body{
display: flex;
flex-direction:column;
align-items: center;
}
.box1 {
width: 50%;
height: 0;
padding-bottom: 25%;
background: #f44336;
}
.box2 {
width: 50vw;
height: 25vw;
background: #2196f3;
}
</style>
</head>
<body>
<div class="box1"></div> <!--padding-->
<div class="box2"></div> <!--vw,vh-->
</div>
</body>
</html>
複製程式碼