关键不是“让图片变小”，而是让浏览器在手机、平板、桌面不同场景下自动加载大小和清晰度刚好够用的那张图；需配合sizes声明实际渲染宽度，并提供匹配的多尺寸w源图，src设中等质量兜底图，再辅以max-width:100%;height:auto;防变形。

网页新闻配图用 srcset 实现多端自适应，关键不是“让图片变小”，而是“让浏览器在手机、平板、桌面不同场景下，自动加载大小和清晰度刚好够用的那张图”。它解决的是：手机不下载 2MB 大图、Retina 屏不显示模糊图、首屏不因大图卡顿——三件事同时兼顾。

明确图片在页面中的显示宽度（必须配 sizes）

新闻配图通常占据容器宽度，比如：手机上占满屏（100vw），平板上占半屏（50vw），桌面端固定为 800px。这些实际渲染宽度必须通过 sizes 告诉浏览器，否则 srcset 中的 w 描述符就失去参照。

• 正确写法：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
• 错误写法：sizes="100vw"（所有设备都按满屏算，小屏也加载大图）或漏写 sizes（浏览器退回到默认 100vw）
• 注意：这个值要和你真实 CSS 布局一致。如果用 Flex/Grid 控制卡片宽度，sizes 就得对应那个容器的实际渲染宽，不能凭感觉写

提供匹配的多尺寸源图（用 w 描述符）

根据 sizes 算出的渲染宽度，再乘以设备像素比（DPR），浏览器才能从 srcset 中选出最合适的图。所以你要准备几档固有宽度的图源，覆盖主流需求：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 手机窄屏（~400px 渲染宽 × DPR2 → 需 ~800px 源图）：提供 news-800.jpg 800w
• 中屏（~600px × DPR2 → ~1200px）：提供 news-1200.jpg 1200w
• 桌面宽屏（800px × DPR2 → ~1600px）：提供 news-1600.jpg 1600w
• src 不可省略，应设为中等质量兜底图（如 news-1200.jpg），确保老浏览器或网络异常时仍能显示

兼顾高分屏清晰度（x 描述符可选但实用）

如果新闻图对细节要求高（比如人物特写、图表截图），可在 srcset 中补充 x 描述符，专门适配 iPhone、MacBook 等高 DPR 设备：

• 例如：srcset="news-1200.jpg 1x, news-2400.jpg 2x"
• 适合固定尺寸容器（如头像、信息卡片图标），搭配 width/height 属性使用更稳
• 不建议混用 w 和 x（如 "a.jpg 800w, b.jpg 2x"），浏览器行为不可控，优先用 w + sizes 组合

配合基础 CSS 防止变形和溢出

srcset 只管“加载哪张图”，不控制“怎么显示”。必须加简单 CSS 让图片在容器内安全缩放：

• img { max-width: 100%; height: auto; } —— 保证不撑破容器，保持原始宽高比
• 若需填满容器且允许裁剪（如 banner 图），加 object-fit: cover; 并设 width: 100%; height: 100%;
• 避免单独写 width: 100% 而不设 height: auto，否则可能拉伸失真