图片撑破网格单元格的根本原因是其固有尺寸参与布局计算，需让图片脱离文档流或显式约束轨道尺寸；常用方案包括absolute定位或设置grid-template-rows/columns配合object-fit。
直接结论：图片撑破网格单元格，不是 Grid 写错了，而是它默认参与尺寸计算 —— 必须让图片脱离文档流，或给网格轨道施加明确尺寸约束。
为什么 width: 100% + height: 100% 还是撑开？
因为浏览器先按图片固有尺寸（比如 1200×800px）算 min-content，再分配 1fr；width/height 是渲染阶段的缩放，不阻止初始布局计算。即使写了 100%，Grid 轨道已被撑大，后续缩放只是“在更大的盒子里压缩”，但容器本身已溢出。
常见错误现象：
- 开发者工具里看到
grid-template-rows: repeat(50, 1fr)没变，但实际行高远超预期 -
object-fit: cover完全没反应 —— 因为父容器高度计算结果是0px（比如grid-template-rows: auto或未设高度） - 响应式缩放时图片忽大忽小，甚至消失 —— 高度依赖内容撑开，而内容加载有延迟
用 position: absolute 彻底移除尺寸干扰
这是最稳定、兼容性最好（Chrome/Firefox/Safari/Edge 全支持）、且不依赖父容器高度是否可计算的方案。
只需两步：
- 给网格项（即
<img>的直接父元素）加position: relative - 给
<img>加position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain
关键点：
-
object-fit必须写在<img>上，写在父容器上无效 - 避免同时设
max-width: 100%或height: auto—— 它们会和absolute冲突，导致回流或错位 - 若网格项内还有文字，文字需加
position: relative; z-index: 1，否则被图片遮住
用 grid-template-rows/columns 显式锁定轨道尺寸
适合固定比例或已知尺寸场景，比如卡片列表、相册网格。
必须同时满足：
- 网格容器上写死轨道，例如
grid-template-rows: 250px或grid-template-rows: minmax(200px, 1fr) -
<img>上设width: 100%; height: 100%; object-fit: cover - 确保父容器有可计算高度（如
min-height: 100vh或包裹在有高度的上下文中）
注意：
-
grid-template-rows: auto或minmax(auto, 1fr)会让height: 100%失效（计算值为0） - 若要响应式比例，优先用
aspect-ratio: 4 / 3替代固定像素，再配width: 100% -
object-position控制图片锚点（如object-position: center top），别误用align-self
为什么 min-width: 0 对图片无效？
min-width: 0 是解决长文本撑列的钥匙，但对图片没用 —— 图片是替换元素，它的尺寸干扰来自 min-content，不是 min-width。强行给图片加 min-width: 0 不会阻止它撑开轨道。
真正容易被忽略的点：
- Grid 容器本身是否有
overflow: hidden？没有的话，撑出的部分会直接溢出页面，调试时看不到裁剪效果 - 图片是否带
alt？用position: absolute后，若仅为装饰图，建议加aria-hidden="true"；若含信息，保留语义并确保焦点可访问 - React/Vue 中动态插入图片时，避免用
document.querySelectorAll手动加 class —— 应用状态驱动显隐或 class 切换，否则 SSR 和 hydrate 会错乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
