<html>
<style>
.box {
/* 1. padding-top 根据父容器进行百分比计算数值的 */
/* width: 50%;
background: blue;
padding-top: 50%; */
/* 2. aspect-ratio： 规定了纵横比，这个纵横比可以用来计算自动尺寸以及其它布局函数服务 */
/* 或者使用
若为16/9 则为 width / height = 16/ 9
*/
width: 50%;
background-color: aqua;
/* aspect-ratio: 1/1; */
aspect-ratio: 16/9;
}
</style>
<body>
<div class="box"></div>
</body>
</html>