必须为 grid item 设置明确尺寸或 aspect-ratio，否则 object-fit: cover 无效——因无缩放基准；它仅作用于替换元素本身，需配合 width/height、display: block 及 object-position 才生效。
必须给 grid item 设明确尺寸或 aspect-ratio，否则 object-fit: cover 无效——它不是“没生效”，而是根本找不到缩放基准。
为什么 object-fit: cover 在 Grid 里经常失效
90% 的情况是 grid item（比如 <img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" > 的父 <div> 或直接是 <code><img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" >）没有宽高约束。Grid 轨道只分配空间，不自动给子项设 width 或 height；图片就按原始尺寸渲染，object-fit 失去作用对象。
-
object-fit只对替换元素（<img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" >、<video></video>）本身起作用，写在容器上完全无效 - 不加
display: block会导致<img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" >默认 inline 行为，引入基线间隙，干扰高度计算 - 仅设
width: 100%不够——若父项高度不定，图片高度仍浮动，object-fit无从裁切
必须设置 aspect-ratio 或等效 fallback
现代方案首选 aspect-ratio: 4 / 3 + width: 100%，语义清晰且响应式友好。旧浏览器可降级为 padding-bottom: 75% + 绝对定位。
- 直接写
grid-template-rows: minmax(200px, 1fr)不可靠——小屏下可能撑破容器，且比例不守恒 -
aspect-ratio必须作用于 grid item（如包裹<img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" >的<div>），或直接作用于 <code><img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" >（需支持） - 避免硬编码
height: 200px，尤其在auto-fill网格中，会破坏弹性 img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }-
object-position别省：默认居中裁切，但人脸/Logo 常需object-position: top或50% 30%微调锚点 - 禁用
transform: scale()、zoom、will-change: transform——它们触发亚像素渲染，直接让object-fit失效 - 仅
srcset不行，缺sizes浏览器无法判断视口内占宽，2x标识就白写了 - 正确写法：
<img src="pic.png" srcset="pic.png 1x, pic@2x.png 2x" sizes="(max-width: 768px) 100vw, 300px" alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" > - 构建工具（如 Vite）默认不生成
@2x图，需配image-minimizer-webpack-plugin或手动输出
img 元素本身的必要样式
object-fit 必须写在 <img alt="如何在CSS Grid中让图片自适应填充单元格同时保持原始比例？" > 上，且需配合显式尺寸和块级显示才能真正生效。
立即学习“前端免费学习笔记（深入）”；
高分屏模糊？不是 Grid 的锅，是资源没配对
Grid 布局本身不会导致模糊。DPR ≥ 2 设备上发虚，是因为原始图分辨率不够 + 浏览器选错资源。
最容易被忽略的点：grid item 没尺寸时，object-fit 不是“效果不好”，而是压根没启动——它连容器多大都不知道，更谈不上怎么缩放裁切。
