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

You can add a fallback for that, this padding hack works for me

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

Other aspects ratio:

• 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
• 4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
• 3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
• 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

Edit: I found this tool it helped me alot for other different aspect ratios https://ratiobuddy.com/

Answer 2

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