如何解决CSS Grid布局图片比例失调

先说一个常见误区：不少开发者在 CSS Grid 布局中为图片添加 object-fit: cover 却始终无法实现理想的自适应效果，问题的根源往往不是 object-fit 属性本身，而是它发挥作用的核心前提——容器必须拥有明确的尺寸与宽高比。本文将从底层原理到实战技巧，完整梳理这条逻辑链条，看完你就能轻松掌握正确写法。

grid item 未定义宽高比，object-fit 形同虚设

给图片加上 object-fit: cover 后依然出现拉伸变形，90% 的原因在于 grid item 自身缺乏稳定的尺寸约束。Grid 轨道仅负责分配空间，并不会为子项设定固定比例；当 grid item 的高度由内容撑开、使用了 display: contents、或仅设置了 width: 100% 而未限制高度时，img 便失去了可供适配的“容器盒子”。
关键解决思路是：先让 grid item 具备明确的渲染尺寸：
• 推荐使用 aspect-ratio: 4 / 3（写在 .grid-item 上，而非 img 上），配合 width: 100%
• 旧版 Safari 不支持 aspect-ratio？可改用 padding-bottom: 75% + position: relative + position: absolute 的嵌套方案
• 尽量避免直接设置 height: 200px——在高 DPR 屏幕下图片会变模糊，优先通过比例来控制尺寸

img 必须同时定义 width: 100% 和 height: 100%

object-fit 仅对“拥有明确渲染尺寸”的替换元素生效。如果 img 采用默认的 inline 显示、只设置了 width 而未指定 height、或使用了 height: auto，浏览器无法确定其适配的尺寸范围，cover 效果自然无法触发。
实际开发中必须同时添加：
• img { width: 100%; height: 100%; display: block; }
• display: block 强制块级化，消除基线对齐带来的底部空白
• height: auto 在 Grid 环境中基本无效，不要依赖“原图宽高属性兜底”——懒加载或 SSR 渲染延迟都会导致其失效

overflow: hidden 是 object-fit: cover 的必要搭档

object-fit: cover 会等比缩放并裁剪图片，但被裁切的部分默认仍占据文档流空间。若不在 grid item 上添加 overflow: hidden，裁剪区域会溢出到相邻网格，尤其在 gap 较小或嵌套布局中表现尤为明显。
注意事项：
• overflow: hidden 应写在 grid item 上，而不是 img 上
• 若网格内还包含文字或其他元素，overflow: hidden 可能误切内容——此时可改用 object-fit: contain 或调整 object-position
• 对于人像类图片，设置 object-position: 50% 20% 比默认居中更安全，能将人物头部保留在可视区域内

响应式断点下 cover 行为突变，这是正常现象而非 bug

同一张图片在 minmax(200px, 1fr) 网格中，小屏单列时裁掉上半身，大屏三列时又显得空旷——这并非 bug，而是 cover 严格依据当前容器尺寸重新计算缩放比例的结果。
应对方案：
• 极窄轨道（如 minmax(120px, 1fr)）中慎用人像图配合 cover，裁剪风险极高
• 通过媒体查询降级处理：@media (max-width: 480px) { img { object-fit: contain; } }
• 最容易被忽视的是图片分辨率本身：即使 object-fit 配置完全正确，原图仅 300px 宽而网格在 Retina 屏上占据 600 CSS 像素，放大后必然模糊——这需要通过 srcset 或更高清的源文件来解决