Firefox中使用aspect-ratio实现子div按固定宽高比适配父容器的方法

2021年起aspect-ratio属性已获得所有现代浏览器支持。此前有类似需求的相关提问，但现存提及aspect-ratio的解决方案在Firefox浏览器中运行结果不符合预期。

需求说明 #

实现元素在aspect-ratio属性的约束下撑满父容器的可用空间，预期效果如下：

原代码问题分析 #

如下初始代码无法正常运行，当父容器宽度调大时布局会出错：

#parent { 
  display: grid; 
  place-content: center; 
  width: 100px; 
  height: 150px; 
  resize: both; 
  overflow: auto; 
  border: 2px solid black;
} 
#child { 
  aspect-ratio: 1 / 1; 
  background: yellow; 
  border: 2px solid orange;
}

<div id="parent"> 
  <div id="child">我应该是一个可缩放的正方形！</div>
</div>

问题核心是没有为子元素设置宽高限制和自适应规则，浏览器无法正确计算子元素适配父容器的最优尺寸。

修复方案 #

仅需给子元素新增4行样式即可实现全兼容效果：

#child { 
  aspect-ratio: 1 / 1; 
  /* 新增适配规则 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: yellow; 
  border: 2px solid orange;
}

规则说明 #

• max-width: 100%、max-height: 100%限制子元素不会超出父容器的可视范围
• width: auto、height: auto配合aspect-ratio，让浏览器自动根据父容器尺寸动态计算子元素大小：父容器高度充裕时，子元素宽度撑满父容器，高度按比例换算；父容器宽度充裕时，子元素高度撑满父容器，宽度按比例换算
• 该方案兼容所有支持aspect-ratio的浏览器，Chrome、Firefox、Safari均能正常运行

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