加了max-width: 100%仍模糊，根本原因是浏览器在高DPR屏上拉伸低分辨率图，而非CSS失效；需用srcset+sizes提供匹配设备像素比的多倍图源，并配合image-rendering和object-fit精准控制渲染。
为什么![HTML怎么避免图片自适应缩放时产生像素模糊]()
加了max-width: 100%还是模糊
这不是 CSS 没生效，而是浏览器在缩放时用了低质量插值算法——尤其当原始图分辨率高、但容器尺寸不匹配物理像素时。常见于 Retina 屏（window.devicePixelRatio === 2 或更高），此时 1 个 CSS 像素对应 2×2 物理像素，若图片未按 dpr 缩放渲染，canvas 或 rasterizer 就会做模糊拉伸。
用srcset + sizes提供多倍图源
模糊常源于“用小图撑大容器”或“用大图硬压小框”，本质是资源密度错配。解决办法不是靠 CSS 缩放，而是让浏览器加载匹配设备像素比的图：
-
srcset必须包含带w单位的描述，例如"logo-1x.png 1x, logo-2x.png 2x"或"logo-480w.png 480w, logo-960w.png 960w" -
sizes不可省略，否则浏览器默认按视口宽度选图，容易加载过大的资源；例如sizes="(max-width: 768px) 100vw, 50vw" - 确保 2x 图文件真实存在且宽高是 1x 图的 2 倍，否则
2x描述无效 - 不要混用
width/height内联属性，它会覆盖srcset的响应逻辑
强制启用高质量缩放：CSS image-rendering 和 object-fit
即使资源匹配，某些浏览器（尤其是 Safari 和旧版 Chrome）仍可能对非整数缩放比使用模糊插值。可通过以下组合收紧控制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对需要等比填充的容器，设
width和height固定值 +object-fit: cover或contain，避免浏览器自由缩放 - 加
image-rendering: -webkit-optimize-contrast（Safari）、image-rendering: crisp-edges（Firefox）或image-rendering: pixelated（仅适用于明确想保留像素风的场景） - 慎用
image-rendering: auto（默认值），它在高缩放比下大概率触发双线性插值 - 注意：IE 完全不支持
image-rendering，object-fit也需-webkit-前缀兼容老 iOS
html2canvas 截图模糊必须单独处理
如果模糊出现在 html2canvas 输出的 PNG 中，那和普通图片显示无关——它是 canvas 绘制阶段的问题：
立即学习“前端免费学习笔记（深入）”；
- 必须显式传入
scale: window.devicePixelRatio || 1，否则默认按 1:1 渲染，在 Retina 屏上直接丢失一半物理像素 - 同时设置
width和height为element.offsetWidth * scale，否则 canvas 缓冲区尺寸不足，强制缩放会模糊 - 避免
scale > 3，内存和渲染时间陡增，iOS 上极易崩溃 - 不要依赖
toDataURL默认质量，PNG 无损，但若后续转 JPEG，务必加canvas.toDataURL('image/jpeg', 0.95)
真正卡住的点往往不在“怎么写 CSS”，而在没意识到：模糊是设备像素、资源密度、绘制缓冲区三者没对齐的结果。改一个地方容易，但漏掉任一环，问题就还在。
