如何让Grid布局的Div填充图片且不影响其他Div？

问题分析 #

• 选择器不匹配：CSS中针对图片容器的样式使用了ID选择器#article-image-section，但HTML对应元素使用的是class属性，导致溢出控制样式未生效。
• 盒模型计算偏差：.article-section未设置box-sizing: border-box，内边距和边框会额外占用空间，破坏Grid单元格的预设尺寸。
• 多元素堆叠挤压：main内多个article默认流式排列，导致首个article无法占满main的可用高度，布局被挤压变形。

修正代码 #

核心CSS修正 #

/* 修正选择器，匹配HTML中的class属性 */
.article-image-section {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 统一盒模型，避免内边距/边框撑开容器 */
.article-section {
  height: 100%;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}

/* 确保首个article占满main空间，隐藏其他冗余article */
main {
  flex-grow: 1;
  overflow: hidden;
}

main > article:first-child {
  height: 100%;
}

main > article:not(:first-child) {
  display: none;
}

保留原有正确样式（无需修改） #

.i-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article {
  display: grid;
  height: 100%;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr;
  overflow: hidden;
}

效果说明 #

修正后：

1. 图片容器会完全填充Grid对应的2fr×2fr单元格，object-fit: cover确保图片按比例裁剪填充，无拉伸变形。
2. 所有.article-section的内边距和边框不再破坏Grid布局，各单元格尺寸符合预设比例。
3. 首个article占满main的可用空间，其他article暂时隐藏（若为轮播需求，可后续通过JS控制显示逻辑）。

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