CSS Grid布局：图片超出.grid容器范围的适配问题求助

这个问题的核心是：你的Grid容器第4行高度固定为250px（容器总高度1000px的25%），但图片本身高度超过了这个值，而且承载图片的#image容器没有设置尺寸限制，导致图片直接溢出了.grid容器，覆盖了下方的.box元素。咱们一步步来解决：

解决方案步骤 #

1. 给#image设置高度填满所在Grid单元格并隐藏溢出内容，确保它不会超出Grid容器的范围；
2. 给内部的img标签设置适配单元格尺寸的样式，保证图片在单元格内合理展示，不溢出也不变形。

修改后的完整代码 #

CSS：

.grid {
  height: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 25%); /* 简化写法，和原效果一致 */
  grid-template-rows: repeat(4, 25%);
}
#image {
  grid-column: 1;
  grid-row: 4;
  height: 100%; /* 强制填满所在Grid单元格的高度 */
  overflow: hidden; /* 隐藏超出单元格的图片部分 */
}
#image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，覆盖整个单元格，超出部分自动裁剪 */
  /* 若希望完整显示图片（可能留空白），可替换为 object-fit: contain; */
}
.box {
  background: black;
  height: 500px;
}

HTML：

<div class="grid">
  <div id="image">
    <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png"/>
  </div>
</div>
<div class="box"></div>

额外说明 #

• object-fit: cover会让图片保持原始比例，填满整个单元格，超出的部分会被裁剪，适合需要图片占满单元格且不变形的场景；
• 如果需要完整展示图片、不想裁剪，用object-fit: contain即可，不过这可能会在单元格内留下空白区域；
• repeat(4, 25%)是CSS Grid的简化写法，和你原来写的四个25%效果完全一致，能让代码更简洁。

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