原理：width height 的百分比表示方式都是以父元素的宽度 长度为参照的（前提：父元素必须设置宽度和长度）
而padding的百分比表示方式 是以 width的值为参照的。
例如：width设置为100px padding设置为10% 则10%表示padding =width * 10% 即10px；
所以，我们可以不设置div容器的高度，只设置宽度，然后用padding-top来撑起高度。只要宽度和padding-top保持一定的比例即可。
代码如下：
<!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>
.aspectration {
height:auto;
width: 100%;
background:url(1.png);
background-size:100% 100%;
}
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}
.main{
width:20%;
}
</style>
</head>
<body>
<div class="main">
<div class="aspectration" data-ratio="16:9"></div>
<div><input type="checkbox">站点信息</div>
</div>
</body>
</html>