如何设置合并CSS Grid单元格内图片的最大高度，以文本行总高度为上限

解决方案 #

你只需要对现有CSS做几处调整即可实现需求，核心思路是让左侧图片容器的高度完全跟随Grid行高（由右侧文本总高度决定），不让图片本身的尺寸参与Grid的高度计算：

1. 给.container显式指定行高规则，同时给左侧容器设置相对定位
2. 图片采用绝对定位，宽高占满父容器，用object-fit控制展示规则

修改后的完整CSS代码如下：

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  /* 显式指定两行高度都由内容自适应决定 */
  grid-template-rows: auto auto;
}

.aside {
  grid-row: 1/3;
  grid-column: 1/2;
  background-color: pink;
  /* 作为图片的定位父级 */
  position: relative;
}

.aside img {
  display: block;
  /* 脱离文档流，不参与Grid高度计算 */
  position: absolute;
  top: 0;
  left: 0;
  /* 宽高占满父容器 */
  width: 100%;
  height: 100%;
  /* 控制图片展示规则，cover为铺满容器，contain为完整展示不裁剪 */
  object-fit: cover;
}

.row1 {
  grid-row: 1/2;
  grid-column: 2/3;
  background-color: lightblue;
  padding: 15px;
}

.row2 {
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: lightgreen;
  padding: 15px;
}

实现原理

默认Grid布局会把所有子元素的内容尺寸都纳入宽高计算，所以左侧图片的原始高度会直接拉高整体Grid的行高。给图片添加绝对定位后，图片脱离正常文档流，Grid计算行高时只会参考右侧两个文本区块的高度，左侧.aside容器高度自动等于右侧两行高度之和，图片再按这个高度自适应填充，即可实现预期效果。

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