怎么解决CSS Grid布局中的图片比例失调？

grid item 没设宽高比，object-fit 就是摆设；必须为 grid item 设置 aspect-ratio 或显式尺寸，再对 img 设置 width: 100%、height: 100%、display: block 和 object-fit: cover，并在 grid item 上加 overflow: hidden 才能生效。

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 会等比缩放并裁剪，但被裁掉的部分默认仍占据文档流位置。如果不加 overflow: hidden 到 grid item 上，裁掉的内容会溢出到相邻格子，尤其在 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 或更高清源文件解决

立即学习“前端免费学习笔记（深入）”；