css 设置元素的宽高比例的方式。

1.padding方式(最优解)

利用padding的特性，padding的计算方式是以父级的宽度进行计算的，如果父级没有，则向上继续寻找，找不到则已屏幕宽为准。

我们可以通过这一属性进行计算

普通版(用于图片背景图)

<div class="parent">
    <div class="aspect-ratio-box">
    </div>
</div>

.parent {
    width: 100px;
}
.aspect-ratio-box {
    width: 100px;
    padding-bottom: 100%;
}

进阶版（有内容的块）

核心 在下面加一个绝对定位块

<div class="parent">
    <div class="aspect-ratio-box">
        <div class="aspect-ratio-box-absolute">
        </div>
    </div>
</div>

.parent {
    width: 100px;
}
.aspect-ratio-box {
    width: 100px;
    padding-bottom: 100%;
    position: relative;
}
.aspect-ratio-box-absolute {
    position: absolute;
    width: 100%;
    height: 100%;
}

2.aspect-ratio属性

此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用

.aspect-ratio {
    aspect-ratio: 1/1; // 元素宽高比为1比1
}

3.rem 或vw vh宽度

将宽度设为固定的rem或者vw vh属性；这样也可以做到宽高等比，通常用于响应式或大屏开发中，如果有需要，还要将rem做为动态尺寸。