响应式图片需同时设 max-width: 100% 和 height: auto；srcset 与 sizes 必须成对使用；复杂场景用 <picture>；绝对定位图片应采用 vw/vh 单位；图片预处理（压缩、格式）是性能基础。
img 必须同时设 max-width: 100% 和 height: auto
只写 max-width: 100%，图片宽度被限制但高度不联动，小屏下直接压扁；只写 height: auto 而不控宽，图片仍按原始像素渲染，窄屏必然溢出。这两条必须共存，缺一不可。
常见错误包括：
– 在行内样式里写 width: 100% 替代 max-width，导致小图被强行拉宽模糊
– 父容器没宽度（比如空 <div>），100% 失去参照，缩放失效
– CSS 重置规则或框架（如 Bootstrap）悄悄加了 max-width: none，需在 DevTools 的 Computed 面板确认最终值
用 srcset + sizes 才算真正适配设备
仅靠 CSS 缩放，浏览器还是加载原图——大图塞进小屏，浪费带宽、拖慢首屏。要让浏览器自己挑最合适的资源，srcset 和 sizes 必须成对出现。
srcset 提供多张图，每个后缀必须是 w 或 x，不能混用：
– 正确：photo-480w.jpg 480w, photo-768w.jpg 768w
– 错误：photo-2x.jpg 2x, photo-768w.jpg 768w
立即学习“前端免费学习笔记（深入）”；
sizes 是字符串，不是 CSS 规则，必须反映图片在页面中**实际占位宽度**：
– 如果图片在 flex 容器里占 50%，别写 sizes="100vw"，应写 sizes="(max-width: 768px) 100vw, 50vw"
– 只写 srcset 不写 sizes，现代浏览器会直接忽略整个 srcset，退回到 src
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
需要换构图或格式时，<picture> 不可替代
<img> 的 srcset 只能响应分辨率或视口宽度，无法处理「竖屏裁特写、横屏展全景」或「优先 WebP，不支持就降级 JPG」这类需求。这时候必须用 <picture>。
<source> 匹配是 AND 逻辑，media 和 type 必须同时满足才启用：
– 把最具体、最高优先级的规则放最前面，例如先写 media="(min-width: 1024px) and (min-resolution: 2dppx)" type="image/webp"
– 拼错 type="image/webp;"（多加分号）或浏览器不支持，整条 <source> 就被跳过
– 兜底的 <img> 必须存在，且 src 和 alt 不能省
绝对定位图片也要响应化
用 position: absolute 或 fixed 布局行星环绕、视差动效时，别再写 width: 350px 这类固定值——它会让所有尺寸失去弹性。
改用相对单位并保留比例：
– 推荐 width: 25vw + height: auto，vw 直接锚定视口，比 % 更可靠（尤其父容器无宽度时）
– 定位坐标也同步响应化：top: 27vh、left: 63vw，而非 top: 200px
– 极小屏下可用媒体查询微调：@media (max-width: 768px) { .star-image { width: 12vw; } }
容易被忽略的是：所有这些技巧都依赖于图片本身是否已做预处理。未压缩的大图配上完美的 srcset，依然会卡顿；而一张 200KB 的 WebP 图，即使只用基础 max-width，体验也可能优于未优化的 1MB JPG。
