CSS Grid布局中图片无法垂直缩放导致网格超屏问题求助

问题根源 #

你遇到的问题是CSS Grid的默认最小尺寸规则和父容器约束缺失导致的：

• CSS Grid项的默认min-height值为auto，这会让网格项优先匹配子元素（也就是你的图片）的原始高度，不会按照1fr的比例强制收缩，最终导致整个网格高度超出视口
• 存放图片的.exercise容器没有设置任何尺寸约束，无法限制子元素图片的尺寸

修复方案 #

你只需要补充3处CSS规则即可解决问题：

1. 给.client类添加min-height: 0，允许网格容器按比例收缩
2. 给.exercise类添加宽高100%、min-height: 0和溢出规则，约束图片父容器尺寸
3. 可选：如果不需要裁剪图片，可以把object-fit: cover换成object-fit: contain完整展示图片全部内容

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

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.client {
  display: grid;
  border: 3px solid black;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 1fr 100px;
  /* 新增规则：允许网格容器按分配比例收缩 */
  min-height: 0;
}

.client-title {
  grid-column: 1 / -1;
  grid-row: 1;
}

.client-description {
  grid-column: 1 / -1;
  grid-row: 6;
}

/* 新增exercise容器的约束规则 */
.exercise {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.exercise-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

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