如何在Firefox中实现Chrome下flex容器嵌套图片网格的效果？

问题场景 #

在flex容器（示例简化为body）内放置固定高度、可变宽度的多尺寸比例图片网格时，Chrome 108.x能让图片保持一致尺寸、保留宽高比并通过object-fit: cover裁剪显示，符合预期；但Firefox 108.x显示异常，图片会按原始宽高比拉伸，导致宽度不一致。此前尝试调整object-fit: cover、aspect-ratio: 1 / 1、嵌套display: block的div、使用reset/normalize.css等方案均未解决。

原始代码示例 #

HTML #

<body>
  <img src="竖图.jpg" alt="竖版图片">
  <img src="横图.jpg" alt="横版图片">
</body>

CSS #

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

img {
  height: 100%;
  object-fit: cover;
  flex: 1;
}

问题原因 #

Firefox在处理flex容器中直接设置flex:1的图片元素时，会优先参考图片原始宽高比分配空间；而Chrome会忽略图片原始比例，仅依据flex属性和height规则分配宽度，导致二者渲染差异。

解决方案 #

给每张图片嵌套一层div容器，将flex布局的空间分配逻辑转移到外层容器上，图片则设置为容器的100%宽高并保留object-fit: cover。

修复后的代码 #

HTML

<body>
  <div class="img-wrapper">
    <img src="竖图.jpg" alt="竖版图片">
  </div>
  <div class="img-wrapper">
    <img src="横图.jpg" alt="横版图片">
  </div>
</body>

CSS

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

.img-wrapper {
  flex: 1;
  height: 100%;
  overflow: hidden; /* 确保图片裁剪后不溢出容器 */
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* 消除图片默认行内元素间距 */
}

效果说明 #

外层div作为flex子元素，Firefox会正确识别flex:1来分配均等宽度；图片作为容器的子元素，设置100%宽高后，object-fit: cover能正常按容器尺寸裁剪图片，最终效果与Chrome完全一致。

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