最可靠方案是img { max-width: 100%; height: auto; }，二者必须成对使用以保持宽高比；缺一即导致压扁或拉长，且需父容器有可计算宽度、避免flex默认min-width干扰，配合srcset/sizes才能实现真响应式加载。
img { max-width: 100% } 必须配 height: auto，否则比例崩坏
只写 max-width: 100% 是常见错误，浏览器会强制压缩宽度但高度不随动，图片立刻被压扁或拉长。必须成对出现：max-width: 100% 控制上限，height: auto 锁定原始宽高比。漏掉后者，再小的视口下图片也会失真。
特别注意 flex 容器：默认 min-width: auto 会阻止 img 缩小，需显式加 min-width: 0 才能生效。
srcset + sizes 不是可选增强，而是带宽控制刚需
仅靠 CSS 缩放只是“视觉响应式”，手机照样下载 2000px 宽的图，然后缩到 375px 显示——白耗流量、拖慢首屏。真响应式必须让浏览器跳过大图，只加载它真正需要的那张。
-
srcset里只能统一用w（如"small.jpg 480w"）或统一用x（如"low.jpg 1x"），混写会导致整个属性被忽略 -
sizes是字符串，不是 CSS，不能写calc()；要匹配真实布局，比如栅格中占 1/3 宽，断点在 768px，则应写sizes="(max-width: 768px) 100vw, 33.33vw"，而非硬塞100vw - 漏写
sizes，浏览器直接退化为只加载src，srcset形同虚设
picture 元素不是炫技，是构图与格式双控开关
当同一张图在小屏需裁剪主体、大屏要展全场，或想优先用 webp 但降级到 jpg，<picture></picture> 就不可替代。它的 <source></source> 按 AND 逻辑匹配：媒体查询 + 类型 + 像素密度，全满足才启用该源。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
常见误用：
- 把
<source></source>当成 fallback 链条——实际是并行匹配，顺序无关 - 忘记写
<img>作为兜底，导致无匹配时空白 - 用
media写了(min-width: 768px)却没覆盖小屏，小屏直接 fallback 到<img>，可能加载错尺寸
object-fit 和 aspect-ratio 是容器侧补救，不是图片本体方案
如果图片本身尺寸混乱、父容器又不能改，可以用 object-fit: cover 或 aspect-ratio: 16/9 强制视觉稳定。但这只是“遮丑”，不解决资源浪费问题。
它们的作用边界很明确：
-
object-fit只影响渲染，不影响加载——大图照下 -
aspect-ratio在现代浏览器支持良好，但 IE 和旧版 Safari 不支持，需配合 padding-top 百分比降级 - 这些属性对
<picture></picture>内的<img>有效，但对背景图无效（得用background-size）
真正省流量、保清晰、适配多端的起点，永远是 srcset/sizes 的精准声明和图片资源的合理切分——其余都是在它失效时的第二道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
