你可以添加一个后备，这个填充黑客为我工作😉

.test {
    aspect-ratio: 16/9;
    // Fallback
    @supports not (aspect-ratio: 16 / 9) {
    &::before {
      float: left;
      padding-top: 56.25%;
      content: "";
    }

    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }
}

其他长宽比：

• 1：1纵横比= 1 / 1 = 1 = padding-top: 100%
• 4：3纵横比= 3 / 4 = 0.75 = padding-top: 75%
• 3：2纵横比= 2 / 3 = 0.66666 = padding-top: 66.67%
• 16：9纵横比= 9 / 16 = 0.5625 = padding-top: 56.25%
  **编辑：**我发现这个工具，它帮助我很多其他不同的纵横比https://ratiobuddy.com/

Safari 15之前的Safari中不支持aspect-ratio作为css属性，但支持使用aspect-ratio @media: (aspect-ratio: 1/1)的媒体查询：https://caniuse.com/?search=aspect-ratio

Cheeky SCSS mixin..

@mixin aspect($width: 16, $height: 9) {
    aspect-ratio: $width / $height;

    @supports not (aspect-ratio: $width / $height) {
        &::before {
            content: '';
            float: left;
            padding-top: calc((#{$height} / #{$width}) * 100%);
        }

        &::after {
            content: '';
            display: block;
            clear: both;
        }
    }
}

以下是适合我的方法：

.box {
  width: 20vw;
  height: calc(20vw * 1/1);
  background-color: black;
}

<div class='box'></div>

1.设置您选择的“宽度”。在本例中，我们将宽度设置为“20 vw”
宽度：20 vw;
1.然后，我们将通过“height”属性创建“aspect-ratio”，通过“calc”将“width”乘以所需的“aspect-ratio”。在本例中，我们将纵横比设置为“1/1”
高度：计算（20 vw * 1/1）;
下面是一个关于如何创建不同纵横比的快速示例：
一比一
height：calc（width * 1/1）;
三比二
height：calc（width * 3）;
四比三
height：calc（width * 3/4）;
16：9
height：calc（width * 9/16）;