CSS - aspect-ratio: 在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，但我无法完全理解问题所在。谢谢您的帮助。如果有任何遗漏的信息，如果您让我知道，我会添加。

- İsa Diliballı

---

https://caniuse.com/?search=aspect-ratio - Maggie Cody

@MaggieCody 谢谢您的回答。我跳过了Safari 15。我明白情况。如果您在另一个答案中解释一下，我会点赞。如果您不想这样做，我会写答案。 - İsa Diliballı

谢谢！我添加了一个答案 :) - Maggie Cody

注意：如果遇到问题，请尝试将iOS更新至15版本。在iOS上，Safari版本与iOS版本相匹配。而Safari 14及以下版本不支持它（或将其隐藏在设置的实验标志后面）。由于存在一些错误，我还没有安装15版本，因此对于我的网站，aspect-ratio为什么不能正常工作感到困惑。这应该可以解决iOS Safari、Chrome等浏览器的问题，因为它们都使用相同的WebKit系统安装。 - V. Rubinetti

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/

- saida lachgar

Answer 2

在 Safari 15 之前的版本中不支持将 aspect-ratio 作为 CSS 属性，但是可以使用带有 aspect-ratio 的媒体查询 @media: (aspect-ratio: 1/1) 来实现。详见：https://caniuse.com/?search=aspect-ratio

- Maggie Cody

---

该功能已被弃用，不应再使用。 - lokarkristina

@lokarkristina 你应该提供这样一个说法的来源。在Mozilla Web Doc网站上https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio上找不到任何关于它已过时或不推荐使用的信息。 - undefined

@Jan 我同意，我今天会告诉自己同样的话。我不记得添加这条评论，现在看起来好像是针对其他事情的，说实话。‍♂️ 出于某种原因，我无法编辑这条评论，所以我很抱歉。 - undefined

Answer 3

有趣的SCSS混合器..

@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;
        }
    }
}

- pacman

Answer 4

这是对我有效的方法：

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

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

1. 设置所需的宽度。在这种情况下，我们将把宽度设置为"20vw"

width: 20vw;

2. 然后，通过使用"calc"函数将"宽度"和所需的"纵横比"相乘，通过"高度"属性创建"纵横比"。在这种情况下，我们将纵横比设置为"1/1"

height: calc(20vw * 1/1);

以下是如何创建不同纵横比的快速示例：

1:1

height: calc(width * 1/1);

3:2

height: calc(width * 2/3);

4:3

height: calc(width * 3/4);

16:9

height: calc(width * 9/16);

- noirsociety