图片撑破 grid 单元格的根本原因是替换元素默认不收缩，需同时设置网格轨道尺寸和 object-fit 才生效；推荐显式定义 grid-template-rows/columns 并配合 width:100%、height:100%、object-fit:cover/contain。
图片撑破 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，两者是协作关系
事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
