图片撑破 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 的实际差异选错会直接导致内容丢失或留白——不是审美问题是信息可读性问题。 Zeemo AI 一款专业的视频字幕制作和视频处理工具