CSS Grid布局如何解决图片溢出网格单元_设置object-fit与网格尺寸

图片撑破 grid 单元格的典型表现

直接看到的是图片高度/宽度超出 grid-area 边界，尤其在 grid-template-rows: auto 或固定行高下，图片原始尺寸强行撑开整个轨道。这不是 Grid 本身的问题，而是图片作为替换元素默认不收缩——浏览器不会自动把一张 2000px 宽的图压进 200px 的单元格里。

关键点：Grid 容器只定义“空间”，不控制子元素内部渲染行为；object-fit 才是管图片怎么填这个空间的。

必须同时设置 grid 尺寸 + object-fit 才生效

只写 object-fit: cover 没用，因为如果父容器（网格单元格）没明确尺寸，图片还是按原始大小渲染，object-fit 失去作用对象。

给网格项（即图片的直接父元素）设 width 和 height，或用 min-width/min-height 配合 overflow: hidden更推荐方式：在网格容器上用 grid-template-columns 和 grid-template-rows 显式声明轨道尺寸，例如 grid-template-rows: 200px 或 grid-template-rows: 1fr图片本身设 width: 100% + height: 100% + object-fit: cover（或 contain）

示例：

立即学习“前端免费学习笔记（深入）”；

article { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 250px; /* 关键：锁定行高 */}article img { width: 100%; height: 100%; object-fit: cover; /* 图片裁切填充 */}

object-fit: cover vs contain 的实际差异

选错会直接导致内容丢失或留白——不是审美问题，是信息可读性问题。

object-fit: cover：等比缩放并裁剪，保证填满，但可能切掉图片边缘（适合封面图、头像）object-fit: contain：等比缩放并完整显示，四周可能留白（适合产品图、图表，需看清全貌）object-fit: fill：拉伸变形，慎用；none 和 scale-down 使用场景极窄，通常不推荐

注意：object-fit 对 <img> 有效，对背景图要用 background-size 替代，别混用。

Flexbox 也能做？为什么优先 Grid + object-fit

能，但逻辑不同：Flexbox 主要解决一维排列，Grid 是二维空间控制。当你要精确控制“第 2 行第 3 列必须是 200×200 的图片区域”，Grid 的 grid-column/grid-row 配合显式轨道尺寸才是正解。

容易被忽略的点：

如果网格项用了 align-self: start 或 justify-self: end，会影响 object-fit 的对齐基准，此时得配合 object-position 微调裁剪起点旧版 Safari 对 object-fit 支持弱（10.1+ 才稳定），如需兼容 iOS 9，得加 @supports 回退或 JS 检测aspect-ratio 可以辅助维持网格项比例，但它不替代 object-fit，两者是协作关系

事情说清了就结束。