Firefox浏览器下CSS aspect-ratio设置width:100%时不生效问题

问题原因 #

该现象是Firefox与Chromium内核对块级元素aspect-ratio属性的计算优先级差异导致的：Firefox在子元素未显式指定height: auto时，会优先匹配父容器的高度约束，覆盖aspect-ratio的计算结果，进而出现拉伸异常。

修复方案 #

调整CSS样式即可兼容双内核，修改后代码如下：

.container {
  height: 50vh;
  /* 新增布局约束，避免默认块级布局干扰比例计算 */
  display: grid;
  /* 如需子元素左对齐可替换为 place-items: start center */
  place-items: center;
}

.box {
  /* 显式声明高度由比例和宽度自动计算 */
  height: auto;
  /* 占满父容器可用宽度 */
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

HTML代码无需修改即可生效，修改后可满足：子元素保持1:1宽高比，同时尽可能占满父容器可用空间，不会超出父容器边界，在Chromium和Firefox中表现一致。

内容的提问来源于stack exchange，提问作者tknura