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

图片撑破 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 一款专业的视频字幕制作和视频处理工具