CSS - 宽高比：在 Safari 浏览器中不起作用

Question

.test {
    width: 20%;
    background: red;
    aspect-ratio: 1/1;
}

<div class="test"></div>

aspect-ratio: 1/1;

除了 safari 之外，它在其他浏览器中都可以正常工作。但这段代码在 Safari 中不起作用。我使用的是 macOS 11.2。我现在已经更新到 macOS 11.5.2。据我所知它支持 safari，但我无法完全理解这个问题。从现在开始谢谢你。如果有遗漏的信息，请告诉我，我会补充。

Answer 1

你可以为此添加一个后备，这个填充黑客对我有用😉

.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/

Answer 2

Safari 15 之前的 Safari 不支持

aspect-ratio 作为 css 属性，但支持使用带有宽高比

@media: (aspect-ratio: 1/1)

的媒体查询：https://caniuse.com/?search=aspect-ratio

Answer 3

厚颜无耻的 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;
        }
    }
}

Answer 4

这对我有用：

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

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

1. 设置您选择的“宽度”。在这种情况下，我们将宽度设置为“20vw”

宽度：20vw；

2. 然后，我们将通过“高度”属性通过“计算”乘以“宽度”和所需的“长宽比”分数来创建“长宽比”。在这种情况下，我们将宽高比设置为“1/1”

高度：计算(20vw * 1/1);

这是有关如何创建不同纵横比的快速示例：

1:1

高度：计算（宽度 * 1/1）；

3:2

高度：计算（宽度 * 2/3）；

4:3

高度：计算（宽度 * 3/4）；

16:9

高度：计算（宽度 * 9/16）；

Answer 5

嗯，我也遇到过同样的问题。 而且，这就是我修复它的方法： 将该元素包装在另一个元素中，并为 CSS 提供 aspect-ratio 属性，这对我有用。

不知何故， aspect-ratio 属性不适用于图像。奇怪