object-fit必须加在上而非容器，且需同时设置width和height（如100%）并确保父容器有明确尺寸，否则无效；它只作用于替换元素，配合object-position控制裁剪锚点，不解决dpr模糊问题。
object-fit 必须加在 <img> 上，不是容器
Grid 只负责划分格子，不管图片怎么显示。图片是否变形，取决于 <img> 自身的渲染行为。很多人把 object-fit: cover 写在网格项（比如 .grid-item）上，结果完全没用——这个属性对普通 div 无效，只作用于替换元素（<img>、<video></video>）。
必须同时满足两个条件才能生效：
-
width和height都要设（哪怕只是width: 100%; height: 100%），否则object-fit不触发 - 父容器得有明确尺寸（比如 Grid 轨道是
200px或1fr且行高已约束）
常见错误写法：.grid-item img { width: 100%; object-fit: cover; } —— 缺少 height: 100%，浏览器按默认宽高比缩放，依然可能拉伸。
align-self 对图片没直接缩放作用，但影响裁剪可见区域
align-self 控制的是整个 <img> 元素在网格项内的对齐位置，不是图片内容在自身框内的定位。它和 object-fit 是两层逻辑：
-
object-fit: cover决定“图片如何缩放+裁剪” -
object-position决定“裁剪框锚点在哪”（如object-position: center top） -
align-self: end是把整张图往下推，可能让顶部被网格项overflow: hidden切掉——这不是你想要的“露出更多脸”，而是错位
真正该调的是 object-position，不是 align-self。比如头像想保全脸部，就写：object-position: center top；想突出脚部，就写 object-position: center bottom。
Grid 轨道尺寸不稳定时，object-fit 会失效
当 grid-template-rows 用 auto、minmax(auto, 1fr)，或网格项高度由内容撑开时，<img> 渲染时可能还没拿到最终高度，导致 object-fit 暂时不工作（尤其 SSR 或图片懒加载场景）。
稳住高度的实操方式：
- 给网格项设
min-height（如min-height: 200px） - 用
aspect-ratio: 4 / 3替代固定高度，再配width: 100% - 避免
align-items: stretch（Grid 默认值）却不约束行高——这会让图片高度被无限制拉伸
别依赖 height: 100% 在动态高度容器里生效；它需要父级高度可计算，而 Grid 的 auto 行高不可靠。
移动端模糊和 DPR 问题，object-fit 解决不了
object-fit: cover 再准，也救不了低分辨率图在 Retina 屏上的模糊。这是因为浏览器把一张 300px 宽的图，按 CSS 像素缩放到 600 物理像素，必然插值失真。
源头解决办法只有两个：
- 用
<picture></picture>+srcset提供 2x 图：<img src="cat-300.jpg" srcset="cat-600.jpg 2x"> - 确保原图分辨率足够：如果 Grid 格子最大宽度是 300px，就提供至少 600px 宽的图源
这个环节和 object-fit 完全无关，但线上一上线就发现图片糊，八成是这里漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
