直接结论：只加 object-fit: cover 没用，必须同时满足三个条件——img 有明确宽高、父网格项尺寸可计算、object-fit 写在 img 上而非容器；最常见错误是将 object-fit 错误写在 .grid-item 等普通 div 上，因该属性仅对 img、video 等替换元素生效。
直接结论：只加 object-fit: cover 没用，必须同时满足三个条件——img 有明确宽高、父网格项尺寸可计算、object-fit 写在 img 上而非容器。
为什么 object-fit 加了还是拉伸？
最常见原因是把 object-fit 错误地写在网格项（比如 .grid-item）上。这个属性对普通 div 完全无效，只作用于替换元素（<img>、<video></video>）。浏览器看到 .grid-item { object-fit: cover; } 就直接忽略。
- 必须写在
img元素上：.grid-item img { object-fit: cover; } -
width和height必须都设（哪怕只是100%），否则object-fit不触发 - 如果网格行高是
auto或minmax(auto, 1fr)，img渲染时可能还没拿到最终高度，导致暂时失效
如何稳住网格单元格尺寸？
Grid 轨道尺寸不稳定，object-fit 就失去作用对象。不能依赖 height: 100% 在动态高度容器里生效——它需要父级高度可计算，而 grid-template-rows: auto 不可靠。
- 显式定义行高：
grid-template-rows: 200px或250px - 用
aspect-ratio: 4 / 3替代固定高度，再配width: 100%，更响应式 - 给网格项设
min-height: 200px，防止内容少时塌陷 - 避免
align-items: stretch（Grid 默认值）却不约束行高，这会让图片被无限制拉伸
object-fit: cover 裁得不准，怎么调脸部位置？
align-self 对图片没缩放作用，它只控制整个 img 元素在网格项内的对齐位置。把 align-self: end 当成“露出更多脸”是典型误解——实际是整张图被往下推，顶部被切掉。
- 真正该调的是
object-position，默认是center center - 头像想保全脸部：
object-position: center top - 突出脚部或底部内容：
object-position: center bottom - 支持关键词（
left、right）、百分比（20% 30%）、像素（10px 20px），写法同background-position
移动端模糊和 Safari 兼容性要注意什么？
object-fit: cover 再准也救不了低分辨率图在 Retina 屏上的模糊——浏览器把一张 300px 宽的图按 CSS 像素缩放到 600 物理像素，必然插值失真。这不是渲染问题，是源图分辨率不足。
- iOS Safari 直到 10.3 才支持
object-fit，旧版本需降级：@supports (object-fit: cover)包裹现代写法 - Safari 9/10 对
object-position支持不全，设了可能被忽略 - 若必须兼容老系统，备选方案是用
background-image+background-size: cover，但语义和可访问性归零
最容易被忽略的点是：你调了半天 object-position，却发现图片本身分辨率只有 400×300，放在 800×600 的格子里放大两倍，再精准的锚点也挡不住模糊。先确认图源质量，再调裁切逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
