CSS Grid 中如何让图片高度跟随同一行文本？

2026-11-06数据小陈

结论

可以将左侧网格项设为定位容器，再让图片绝对定位并铺满容器。图片移出普通流后，不再参与网格行高计算；这一行的高度由右侧文本决定，图片随网格单元格伸缩。

左侧 .Row3-L 和右侧 .Row3-R 是同一行的网格项。普通流中的图片带有固有宽高，可能影响行高。将图片移出普通流后，右侧文本及其间距和内边距决定这一行的高度。

修改方法

保留现有网格定义，为左侧单元格和图片添加以下样式：

.container div.Row3-L {
  grid-area: Row3-L;
  position: relative;
}

.container div.Row3-L .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

网格项默认会沿行方向拉伸，填满网格区域，因此 .Row3-L 会跟随所在行的高度。position: relative 将这个单元格设为图片的定位参照；inset: 0 让图片边缘贴合单元格，width 和 height 设为 100% 后，图片便会随单元格变化。

object-fit: cover 会填满区域，但可能裁切图片。若要完整显示图片，可以改为 object-fit: contain，区域内可能会因此留白。

注意事项

网格行的高度由整行共享，不能只给其中一个单元格单独设置行高。若要让文本决定这一行的高度，需要避免图片的固有尺寸参与行尺寸计算。还要确认 .Row3-L 没有通过 align-self、固定行高或其他规则改变默认的拉伸行为。