必须为 grid item 设置 aspect-ratio 或显式尺寸，再让 img 宽高均为100%、display: block、object-fit: cover 且父容器 overflow: hidden，否则裁剪失效或图片失真。
只加 object-fit: cover 没用，必须让 grid item 有稳定宽高比，再让 img 拉满并裁剪——否则图片照样拉伸、塌陷或溢出。
grid item 必须设 aspect-ratio 或显式尺寸
Grid 轨道只分配空间，不自动给子项（即 .grid-item）定比例。如果 .grid-item 高度由内容撑开、或没写 height、或用了 display: contents，object-fit 就失去参照盒，等于没配。
-
aspect-ratio: 4 / 3写在.grid-item上（不是img），配合width: 100%就能稳住格子形状 - 旧版 Safari 不支持
aspect-ratio？用padding-bottom: 75%+position: relative替代 - 避免只写
height: 200px—— 高 DPR 设备（如 iPhone）下可能模糊，优先用比例控制
img 必须同时设 width: 100% 和 height: 100%
object-fit 只对「有明确渲染盒」的替换元素生效。如果 img 是 inline（默认）、或只设了 width 没设 height、或 height: auto，浏览器无法确定它要适配的盒子大小，cover 就不触发。
- 强制块级：
img { display: block; }，消除基线对齐导致的底部空白 - 必须双写：
width: 100%; height: 100%，缺一不可；height: auto在 Grid 中基本无效 - 别信“
img自带宽高属性能兜底”——懒加载、空src、SSR 渲染延迟都会让它失效
overflow: hidden 是 cover 的硬性搭档
object-fit: cover 会等比缩放并裁剪，但裁掉的部分默认仍占据文档流位置。如果不加 overflow: hidden，被裁区域会溢出到相邻格子，尤其在 gap 较小或 flex/grid 嵌套时明显。
- 该样式必须加在
.grid-item上，不是img上 - 若格子内还有文字或其他元素，
overflow: hidden可能误切内容——此时改用contain或调整object-position -
object-position: top比center更适合人像，避免人脸被裁掉
响应式断点下 cover 行为突变怎么稳住
同一张图在 minmax(200px, 1fr) 网格中，小屏单列时裁上半身，大屏三列时又显太空——这不是 bug，是 cover 严格按当前容器尺寸重算缩放的结果。
- 窄列（如
minmax(120px, 1fr)）慎用人像类图配cover，裁剪风险极高 - 用媒体查询降级：
@media (max-width: 480px) { img { object-fit: contain; } } - 关键主体偏上？直接写
object-position: 50% 20%把取景框往上提
真正容易被忽略的是：图片分辨率本身。哪怕 object-fit: cover 完全正确，如果原图只有 300px 宽，而格子在 Retina 屏上占 600 CSS 像素，放大后必然模糊——这得靠 srcset 或更高清源文件解决，和 object-fit 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
