Chrome中Flex容器内图片拉伸至父高，Firefox无此表现的兼容问询

问题情况 #

下面这段代码在Chrome和Firefox中的显示效果不一样：

Chrome会把.cancel-icon容器里的图片拉伸到和父元素一样高，但Firefox会保留图片的原始高度。目前只能靠给图片指定固定宽度（就是CSS里注释掉的那行）来统一效果，但这种硬编码宽度的方式不够灵活。

相关代码 #

CSS代码 #

.content-wrapper {
  display: flex;
  border: 1px solid #DA291F;
  height: 40px;
}
.timer-text {
  display: flex;
  align-items: center;
  color: #313131;
  padding: 0 5px;
}
.cancel-icon {
  display: flex;
  padding: 0 5px;
}
/* .cancel-icon img {
  width: 20px;
} */

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="content-wrapper">
      <div class="timer-text">
        <div>00:00:00</div>
      </div>
      <div class="cancel-icon">
        <img src="https://svgshare.com/i/mmR.svg">
      </div>
    </div>
  </body>
</html>

解决办法 #

办法1：让图片自适应容器且保持比例 #

给.cancel-icon添加垂直居中对齐，再给图片设置最大高度为容器高度，宽度自动计算，这样既能适配容器高度，又不会让图片变形：

.cancel-icon {
  display: flex;
  padding: 0 5px;
  align-items: center; /* 统一垂直居中方式 */
}
.cancel-icon img {
  max-height: 100%; /* 图片高度不超过容器 */
  width: auto; /* 自动计算宽度，保留原始比例 */
}

办法2：用object-fit控制图片填充逻辑 #

如果需要图片完全填充容器同时保持比例，可以用object-fit属性：

.cancel-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 按比例填充容器，完整显示图片 */
  /* 若需要图片覆盖容器，可替换为object-fit: cover; */
}

办法3：强制图片继承容器高度 #

直接设置图片高度等于容器高度，宽度自动调整，这样两款浏览器会遵循同一渲染规则：

.cancel-icon img {
  height: 100%;
  width: auto;
}

以上方案都无需硬编码固定宽度，能完美实现跨浏览器的渲染一致性。

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