图片模糊的根本原因是浏览器插值时原始像素与渲染像素不匹配，需同时设置HTML宽高属性、精准配置srcset/sizes、按DPR提供对应分辨率图源，并优先用img替代background-image。
为什么加了 max-width: 100% 还是模糊
因为浏览器在缩放图片时默认用双线性插值，而插值质量取决于「原始像素数」和「最终渲染像素数」是否匹配。只靠 CSS 缩放，img 元素没有原始宽高信息，浏览器无法稳定确定插值起点——尤其当容器宽度随视口变化、又没设 width/height 属性时，失真会更明显。
- 必须同时设置 HTML
width和height属性（比如 -
style="max-width: 100%; height: auto;"要写在img上，不能只作用于父容器 - 避免只写
width: 100%+height: 100%，这会强制拉伸、破坏比例、加剧插值失真
srcset + sizes 不生效的常见原因
写了 srcset 却还是加载小图、或者加载超大图再强行压缩，多半是 sizes 值没对上真实布局占用宽度，导致浏览器选错资源。
-
sizes必须用长度单位（vw、px、em），不能写100%或留空 - 如果 CSS 中
@media (max-width: 768px) { .banner { width: 100vw; } }，对应sizes就该是"(max-width: 768px) 100vw, 50vw" -
srcset里只用w描述符（如"img-400.jpg 400w"），混用x（如"img@2x.jpg 2x"）会让解析逻辑混乱 -
src属性必须存在，且应是中等分辨率 fallback（如800w图），别设成400w小图
高 DPR 屏幕下图片发虚的根本解法
不是“换一张更清晰的图”，而是让设备像素比（window.devicePixelRatio）和图片资源宽度严格对齐——否则浏览器必然二次插值。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 提供 @2x/@3x 切图（如
icon@2x.png对应物理尺寸 100×100px，但语义上代表 50×50 CSS px） - 在
srcset中用w描述符标注真实像素宽度，例如"icon@1x.png 50w, icon@2x.png 100w" - 配合
sizes="(min-resolution: 2dppx) 50px, 50px"可进一步提示高分屏偏好，但兼容性有限，优先靠w+sizes组合 - 导出切图时命名、路径、尺寸三者必须一致，否则
srcset指向的是 400w 的文件，实际却是 200px 宽的图，白搭
背景图模糊没法用 srcset 怎么办
CSS background-image 不支持 srcset，所以不能靠浏览器自动选图；background-size: cover 本质仍是缩放+插值，失真无法避免。
- 改用
object-fit: cover替代背景图，这样就能用srcset+sizes - 如果必须用背景图，至少确保图源分辨率 ≥ 最大可能渲染宽度 ×
devicePixelRatio（例如最大容器宽 1200px，DPR=3，则图至少要 3600px 宽） - 避免在
background-size上依赖100% 100%或auto，它们不保比例，极易触发非等比拉伸 - 动态生成的背景图（如用户头像）可临时加
image-rendering: pixelated或crisp-edges抑制模糊，但仅限线条/图标类内容
关键点其实就一个：浏览器插值不可关，但可以绕开——所有有效手段，都是为了让「原始像素数」和「最终渲染所需像素数」尽可能一致。一旦你开始手动控制宽高属性、写准 sizes、按 DPR 提供对应图源，模糊就从“必然发生”变成“可预测、可规避”的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
