CSS3 background-image与HTML5 img标签图片缩放适配问题

问题现象 #

使用<img>标签在容器内渲染图片时，图片会撑开容器高度，宽度无法正常适配容器边界；同一张图使用background-image搭配background-size: cover可正常限制在容器内，效果符合预期。目标是不使用CSS背景属性，仅用<img>标签实现同等展示效果。

备注：使用Sass编译器，测试图片尺寸为1500×2376。

原有实现代码 #

正常生效的背景图实现 #

HTML结构：

<div class="image">
    <div class="demo-image"></div>
</div>

对应SCSS样式：

.header-content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;

  .left-header{
    display: flex;
    align-items: center;
    position: relative;

    .image{
      height: 90%;
      width: 68%;
      margin-left: 4rem;
      background-color: #000;

      .demo-image{
        height: 100%;
        width: 100%;
        background-image: url("https://newyorkyimby.com/wp-content/uploads/2016/08/One-Journal-Square.jpg");
        background-size: cover;
      }
    }
  }
}

未达预期的img标签实现 #

HTML结构：

<div class="image">
    <img src="https://newyorkyimby.com/wp-content/uploads/2016/08/One-Journal-Square.jpg" alt="示例图片">
</div>

对应SCSS样式：

.image{
   height: 90%;
   width: 68%;
   margin-left: 4rem;
   background-color: #000;

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

失效原因与修复方案 #

核心失效原因 #

<img>默认是行内替换元素，行内元素默认的基线对齐规则会在元素底部预留3-4px的空白间隙，直接导致容器被撑高，出现尺寸适配异常。

修复后代码 #

只需要给<img>增加display: block声明，消除行内元素默认间隙即可。object-fit: cover本身的渲染逻辑和background-size: cover完全一致，都会保持图片宽高比、缩放至完全覆盖容器、裁剪超出部分、不会拉伸变形。

.image{
   height: 90%;
   width: 68%;
   margin-left: 4rem;
   background-color: #000;
   // 可选兜底：极端布局场景下可开启，避免内容溢出
   // overflow: hidden;

   img{
     display: block; // 核心修复：消除行内元素默认底部间隙
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
}

额外排查点 #

如果修复后仍出现高度被撑开的问题，检查百分比高度的传递链路：.image设置了90%高度，需要确保其父元素.left-header有可计算的明确高度。当前代码中.left-header是grid布局子项，默认会被拉伸填充网格高度，高度链路是通顺的，加完上述修复即可完全复现背景图的展示效果。

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