Firefox中div内设置height:50%的img元素显示异常过小问题求助

• 该表现是Chrome和Firefox对CSS百分比高度规范的实现差异，并非Firefox的bug：W3C官方规范明确要求，子元素的百分比高度要生效，父元素必须有显式声明的固定高度值作为计算基准。
• Chrome针对父高度由内容动态撑开的场景做了非标准的兼容优化，会默认将父元素渲染后的实际高度作为子元素百分比的计算基准；Firefox则严格遵循规范，父元素无显式height声明时，子元素的百分比高度直接失效，最终img高度仅由默认行高或者元素基线撑开，就会出现2-3px的异常表现。
• 你修改的browser.enable_automatic_image_resizing配置仅控制Firefox打开单独图片链接时的自适应缩放逻辑，和CSS页面渲染规则无关，因此无法解决该问题。

• 方案1：给父div元素显式设置固定高度，例如height: 80px，直接给子元素的百分比高度提供明确计算基准，即可实现双浏览器表现一致。
• 方案2：如果父元素高度需要动态适配内容，给父div开启flex布局即可，示例代码如下：

/* 父容器新增CSS属性，原有属性保留即可 */
.parent-container {
  display: flex;
}
/* img 原有CSS保留即可，Firefox会自动兼容flex容器下的百分比高度 */

• 方案3：如果父元素高度继承自上层祖先，可从当前父元素向上逐层添加height: 100%，直到追溯到有显式固定高度的祖先元素即可。
• 方案4：绕开百分比高度规则，直接给img设置max-height: 40px类固定值，或者用vh、em等相对单位指定高度。

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