CSS设置宽高比

<view class="scale-box">
    <view class="scale-box-content">
        <!-- content -->
    </view>
</view>
.scale-box {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.scale-box-content {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

通过设置 scale-box 的 padding-bottom 来控制宽高比例,width 和 padding-botton 都为 100% 则表示正方形,宽度 100%、padding-bottom 50% 则表示宽高比为 2:1