图片在移动端适配需提供多分辨率资源，配合srcset/sizes智能加载、max-width:100%/height:auto保持比例，并优先使用WebP/AVIF格式。
让图片在移动端自动适配不同屏幕密度而不失真，核心是提供多分辨率资源并配合响应式 CSS 控制渲染尺寸，同时利用现代浏览器的 srcset 和 sizes 属性实现智能加载。
用 srcset + sizes 按设备像素比选择合适图片
浏览器会根据设备像素比（dpr）、视口宽度和布局尺寸，自动从 srcset 列表中选取最匹配的图片源，避免拉伸或压缩失真。
- 在
<img alt="如何让图片在移动端自动适配不同屏幕密度而不失真" >标签中写入多个分辨率版本（如 @1x、@2x、@3x）或宽度描述符（400w、800w） - 搭配
sizes属性声明图片在页面中的显示宽度（如sizes="(max-width: 768px) 100vw, 50vw"），帮助浏览器预判渲染尺寸 - 示例：
srcset="logo-400w.jpg 400w,
logo-800w.jpg 800w,
logo-1200w.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw">
设置 CSS 宽高约束，防止强制拉伸
即使图片资源正确，错误的 CSS 仍会导致失真。关键是要让图片按比例缩放，不破坏宽高比。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 给
<img alt="如何让图片在移动端自动适配不同屏幕密度而不失真" >设置max-width: 100%和height: auto，确保它不会超出容器且保持原始比例 - 避免固定写死
width和height（如width: 200px; height: 100px），这会强制裁剪或拉伸 - 若需背景图适配，用
background-size: cover或contain，并配合background-repeat: no-repeat
输出高倍率图片并合理命名
为 2x/3x 屏幕准备对应资源是基础。不需要为每种 dpr 单独切图，而是按物理像素输出，并通过 HTML/CSS 告诉浏览器如何使用。
- @2x 图片应为设计稿尺寸 ×2（如图标 24×24px → 输出 48×48px）；@3x 同理（72×72px）
- 命名建议统一（如
icon.png、icon@2x.png、icon@3x.png），便于维护和自动化工具识别 - 可借助构建工具（如 Webpack 的
responsive-loader）自动生成多尺寸版本
补充：考虑现代格式与渐进增强
除了适配密度，提升清晰度和加载效率同样影响“不失真”的实际观感。
- 优先使用
.webp或.avif格式（体积更小、细节保留更好），配合<picture></picture>回退到.jpg/.png - 对关键图片启用懒加载（
loading="lazy"）和解码优化（decoding="async"），减少阻塞导致的渲染错位 - 服务端可结合 User-Agent 或 Client-Hints（如
dpr、width）动态返回适配图片，但需后端支持
