grid item 必须有明确宽高或 aspect-ratio，否则 object-fit: cover 失效；正确写法是 img { width: 100%; height: 100%; object-fit: cover; display: block; }，并配合 srcset + sizes 实现响应式高清适配。
grid item 必须有明确宽高或 aspect-ratio
object-fit: cover 在 Grid 里失效，90% 的原因是 grid item 没尺寸——它只是个“空盒子”，浏览器连缩放基准都找不到。Grid 轨道只分配空间，不给子项设 width 或 height，img 就按原始尺寸渲染，拉伸变形不可避免。
- 写
aspect-ratio: 4 / 3+width: 100%是现代首选：语义清晰、响应式友好、无需 JS - 兼容老浏览器可 fallback 为
padding-bottom: 75%+position: relative+img绝对定位 - 避免只写
height: 200px硬编码，尤其在auto-fill网格中；优先用比例或minmax() -
display: block必加在img上，否则默认inline会引入基线间隙，干扰高度计算
object-fit 必须作用于 img 元素本身
把 object-fit: cover 写在 grid item 容器上完全无效——它只对替换元素（img、video）起作用。常见错误是以为“父容器设了 cover 就够了”，结果图片照样被拉长。
- 正确写法：
img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } -
object-position不要省：默认裁切中心，但人脸、Logo 往往偏上，object-position: top或50% 30%可手动调锚点 - 若用
background-image替代img，就得换用background-size: cover和显式background-size: 100px 60px，auto会失准
高分屏下模糊？不是 Grid 的锅，是资源没配对
Grid 布局本身不会导致模糊。DPR ≥ 2 设备上图片发虚，根本原因是原始图分辨率不够 + 浏览器选错资源，object-fit 再准也救不了像素缺失。
- 必须用
srcset+sizes：仅srcset不行，缺sizes浏览器无法判断视口内占宽，2x 标识就白写了 - 示例：
<img src="pic.png" srcset="pic.png 1x, pic@2x.png 2x" sizes="(max-width: 768px) 100vw, 300px"> - 构建工具（如 Vite）默认不生成 @2x 图，需配
image-minimizer-webpack-plugin或手动输出 - 禁用
transform: scale()、zoom、will-change: transform，它们触发亚像素渲染，直接让object-fit失效
网格列行定义别写死，用 minmax 控制弹性底线
写 grid-template-columns: 200px 200px 看似整齐，但小屏下会横向滚动或图片被压缩。真正的“自适应”靠的是弹性约束，不是固定像素。
- 推荐：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))—— 每格至少 280px，剩余均分 - 行高同理：
grid-template-rows: minmax(200px, 1fr) 1fr，避免内容少时高度塌陷 - 不同原始比例的图（4:3 vs 16:9）用
cover后裁剪区域必然不同，这是正常现象；目标是观感整齐，不是像素对齐 - 别给
img设固定height，高度应由grid item的aspect-ratio或minmax控制
display: block 和 sizes 属性——前者让图片撑不满容器，后者让高分屏永远加载 1x 图，再精细的 Grid 布局也救不回模糊和变形。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
