Grid布局本身不会导致图片模糊，模糊主因是图片分辨率不足与渲染层缩放失准，尤其DPR≥2时；需用srcset+sizes配合高倍图资源，并确保object-fit作用于img自身且有明确宽高，避免亚像素渲染。
Grid 布局本身不会导致图片模糊，模糊的根源几乎总是图片资源分辨率不足 + 渲染层缩放失准，尤其在 DPR ≥ 2 的设备上。直接调大 grid-template-rows 或加 transform: scale() 只会让问题更糟。
为什么 Grid 里的 <img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" > 在 iPhone 或 4K 屏上还是糊
常见错误是以为“用了 object-fit: cover 就万事大吉”。其实它只控制图片怎么填格子，不解决像素密度问题：
- 浏览器按 CSS 像素渲染，
<img src="icon.png" alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" >若原始宽高仅 50×50px，在 DPR=3 的屏上会被拉伸到 150 物理像素，必然模糊 - Grid 容器设了
width: 300px，但没配sizes和srcset，浏览器无法判断该选哪张图 - 父级用了
transform: scale(0.9)或zoom: 90%，触发亚像素渲染，object-fit失效
srcset + sizes 是最稳的方案（不是媒体查询）
对普通 <img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" >，优先用原生属性组合，比 CSS 媒体查询更可靠、更早触发资源加载：
- 必须同时写
sizes：否则浏览器不知道这张图在布局中占多大视口宽度，2x标识就形同虚设 -
2x是设备像素比标识，和文件名无关；icon@2x.png只是便于人识别，可改叫icon-hd.png - 示例写法：
<img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x" sizes="(max-width: 768px) 100vw, 300px"> - Webpack/Vite 构建时，
url-loader默认不生成多倍图，需手动配置image-minimizer-webpack-plugin输出@2x版本
object-fit 必须配明确尺寸，且作用于 <img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" > 自身
很多人把 object-fit 写在 grid item 容器上，完全无效。它只对替换元素（<img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" >、<video></video>）起作用：
立即学习“前端免费学习笔记（深入）”；
- Grid 项需设
width和height（或aspect-ratio），否则object-fit在动态加载时可能延迟生效 - 推荐写法：
img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } - 若用
background-image替代<img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" >，就得换用background-size: cover和background-position，且必须显式设background-size: 100px 60px（逻辑像素值），不能依赖auto
高分屏下仍模糊？检查是否触发了亚像素渲染
即使图源正确、object-fit 正确，系统缩放（如 Windows 125%）、transform: scale() 或 will-change: transform 都会导致浏览器用小数像素渲染，高 DPR 下立刻模糊：
- 用
round()函数修正（Chrome 115+ 支持）：width: round(300px * 0.95); - 临时加
outline: 1px solid red到<img alt="CSS怎么解决Grid布局下图片模糊问题_针对高分屏的网格渲染优化" >，看是否出现 0.5px 边框——有即为亚像素问题 - 避免在 grid item 上设
align-items: stretch却不约束高度；改用min-height或aspect-ratio - 慎用
image-rendering: -webkit-optimize-contrast：对小图有效，但对大图可能加重色带，Firefox 不支持optimizeQuality
真正难处理的不是怎么写 CSS，而是构建流程里没把多倍图当成一等公民——@2x 图不是“锦上添花”，是高分屏下的基础交付物。
