应使用 CSS 控制图片尺寸以避免失真：优先用 max-width: 100%; height: auto; 实现响应式等比缩放；需固定宽高比时可用 aspect-ratio（注意兼容性）；高清屏与流量优化须配合 srcset 和 sizes。
直接用 width 和 height 会失真，别这么干
html 里写 
- 老式属性
width/height是“强制像素值”，不保比例 - 现代页面基本都用 CSS 控制尺寸，HTML 属性只该用于提供原始宽高（比如做响应式占位）
- 如果必须用内联样式，优先写
style="width: 200px; height: auto;"——auto是关键
max-width: 100% 是响应式图片的底线配置
这是让图片在容器变窄时不溢出、同时保持比例最稳妥的一行 CSS。几乎所有现代项目都默认加这一句，不是可选项，是防错刚需。
- 单独写
max-width: 100%就够了，不用配height，浏览器自动算 - 它只限制“最大宽度”，小图不会被放大，大图会被等比缩小
- 如果父容器用了
display: flex或grid，可能需要额外加flex-shrink: 0防止被压缩到 0 - 示例：
@@##@@
想精确控制宽高比？用 aspect-ratio，但得看浏览器
aspect-ratio 是 CSS 新属性，能直接声明“我要 16:9”或“4:3”，浏览器自动维持比例，哪怕内容加载中也不塌陷。但它在 Safari 15.4+ 和 Chrome 88+ 才稳定支持。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 写法：
style="aspect-ratio: 16 / 9; width: 100%;"，height不用设 - 兼容 fallback 方案：外层包个容器，用 padding-top 百分比做占位（经典“padding hack”）
- 注意：如果图片本身分辨率极低，强行撑大仍会模糊，
aspect-ratio不解决画质问题
srcset + sizes 不是“高级技巧”，是高清屏和流量敏感场景的必需项
用户手机开 2x 屏幕，你只给 1x 图片，就会模糊；用户用 4G 流量刷网页，你塞一张 3MB 的桌面图，体验直接崩。这两个属性就是为这事生的。
-
srcset列多个图源，比如photo-400w.jpg 400w, photo-800w.jpg 800w -
sizes告诉浏览器“在不同视口下，这张图大概占多宽”，比如(max-width: 768px) 100vw, 50vw - 浏览器自己选最匹配的图下载，不靠 JS，不阻塞渲染
- 漏掉
sizes，srcset很可能退化成只用第一张图
实际调尺寸不是调一个值的事——宽高比、设备像素比、容器约束、加载时机，全得串起来看。漏掉任意一环，要么图糊，要么溢出，要么白屏闪一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
