使用CSS实现容器长宽比，常见的HTML模板结构有两种：
<div class="aspectration" data-ratio="16:9"> <div class="content"></div> </div>
另外一种结构是：
<div class="aspectration" data-ratio="16:9"> </div>
具体使用的时候，根据自己使用场景采用不同的结构。
这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。
具体的CSS代码如下：
.aspectration{
background: #abcdef;
width: 100%;
height: 0;
padding-top: calc(100% * 9/16);
position: relative;
}
.content{
width: 100%;
height: 100%;
background: yellow;
position: absolute;
top: 0;
left:0;
}
原文：https://www.cnblogs.com/caoxueying2018/p/11131628.html