JIA's blog

垂直方向的padding+calc
借助padding-top或者padding-bottom的百分比值来实现容器的宽高比，padding的百分比值是根据外层容器的宽度计算的，我们只需要设置好外层容器的宽度，并将容器的高度设置为0，容器所有子元素都设置绝对定位。

.container{ width: 300px; } .aspectration{ width: 100%; position: relative; height: 0; } .aspectration[data-ratio='4:3']{ padding-top: calc(100% / 4 * 3); } .aspectration>*{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }