CSS 纵横比在 Firefox 中无法正常工作

Question

我创建了一个简单的 div，宽高比属性设置为另一个 div 的子级。内部 div 必须填充整个可能的 space（但仍然尊重传递的纵横比）。

它在基于 chromium 的浏览器上按预期工作，但在 firefox 上它似乎忽略了宽高比：设置宽度：100% 并且内部 div 最终被拉伸。

.box {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
}

<div class="container">
  <div class="box">
    Sample content
  </div>
</div>

Answer 1

改为使用 max-width: 100%，在 chrome 和 firefox:

中对我来说效果很好

.box {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
}

<div class="container">
  <div class="box">
    Sample content
  </div>
</div>

Answer 2

aspect-ratio 是 weak declaration 所以你在 Firefox 中得到的可以被认为是正确的，因为该元素在 [=12] 之前尊重 width 和 max-height =].我什至会说 Chrome 的行为是错误的。

值得注意的是 aspect-ratio 仅设置 首选宽高比 ^ref 以提供类似的行为到具有固有纵横比的图像元素。这绝不是为了强制元素的比例。

在您的示例中使用图像，您将获得与在 Firefox 中相同的结果

.box {
  width: 100%;
  max-height: 100%;
  /*aspect-ratio: 1 / 1;*/
}

.container {
  height: 50vh;
}

<div class="container">
  <img src="https://picsum.photos/id/237/300/300" class="box">
</div>

以上将为您提供一张拉伸图像，确认 Firefox 的正确行为

CSS 纵横比在 Firefox 中无法正常工作

CSS aspect-ratio not working properly in Firefox

css

firefox

aspect-ratio