在互动效果要求比较高的时候, 由于浏览器缩放问题, 我们需要用视图高度作为基础尺寸, 或者 grid 属性进行布局, 那么 如何实现一个宽度自适应, 高度为宽度的一般的矩形

我们将元素高度由 padding 撑开, 由于 padding 是根据父元素宽度计算的, 所以高度也就变成了相对父元素高度,同时将 height = 0 代码如下:

<div class="scale"></div>

.scale {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}