图片CSS Grid超出父容器范围的原因及修复方法咨询

问题原因 #

• 父容器.images_grid设置了height: 500px，但作为Grid容器的子元素.images_grid__content未指定高度，导致Grid的行高计算不受父容器高度约束。
• 图片原始尺寸为505px×758px，设置width:100%会让图片填满Grid单元格宽度，而height:100%会触发图片按原始比例缩放，反过来撑大Grid单元格的高度，最终整个Grid容器高度超过父容器的500px，超出部分自然显示在父容器的下方区域。

修复方案 #

核心修复：给Grid容器设置高度 #

修改.images_grid__content的CSS，添加height: 100%，让它继承父容器的500px高度，这样Grid的两行（1fr 1fr）会平分500px高度，每个行高固定为250px：

.images_grid__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "image_1 image_3 image_5 image_6" "image_2 image_4 image_5 image_7";
  height: 100%; /* 添加此行 */
}

此时图片的height:100%会适配Grid单元格高度，配合object-fit: cover属性，图片会被裁剪以填满单元格，整个Grid容器高度被限制在500px内，不会超出父容器。

可选优化：防止极端溢出 #

如果需要确保父容器完全包裹内容，避免极端情况的溢出显示，可以给.images_grid添加overflow: hidden：

.images_grid {
  height: 500px;
  overflow: hidden; /* 可选 */
}

原始代码 #

CSS #

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.images_grid {
  height: 500px;
}

.images_grid__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas: "image_1 image_3 image_5 image_6" "image_2 image_4 image_5 image_7";
}

.images_grid__image {
  display: block;
  object-fit: cover;
  object-position: bottom;
  width: 100%;
  height: 100%;
}

.images_grid__image_1 { grid-area: image_1; }
.images_grid__image_2 { grid-area: image_2; }
.images_grid__image_3 { grid-area: image_3; }
.images_grid__image_4 { grid-area: image_4; }
.images_grid__image_5 { grid-area: image_5; }
.images_grid__image_6 { grid-area: image_6; }
.images_grid__image_7 { grid-area: image_7; }

HTML #

<div class="images_grid">
  <div class="images_grid__content">
    <img class="images_grid__image_1 images_grid__image" alt="Image 1" src="image.png">
    <img class="images_grid__image_2 images_grid__image" alt="Image 2" src="image.png">
    <img class="images_grid__image_3 images_grid__image" alt="Image 3" src="image.png">
    <img class="images_grid__image_4 images_grid__image" alt="Image 4" src="image.png">
    <img class="images_grid__image_5 images_grid__image" alt="Image 5" src="image.png">
    <img class="images_grid__image_6 images_grid__image" alt="Image 6" src="image.png">
    <img class="images_grid__image_7 images_grid__image" alt="Image 7" src="image.png">
  </div>
</div>

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