方法一：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>
