响应式图片需四层协同：CSS用max-width:100%;height:auto;控制尺寸，srcset/sizes控制资源选择，picture/source控制构图切换，viewport控制视口；任一层缺失都会导致效果断档。
<img> 标签本身不响应，它只按原始尺寸渲染，除非你用 CSS 或属性显式干预。光写 <img src="a.jpg">，在小屏上大概率撑破容器、拉伸变形、或留下大片空白。
为什么 width: 100% 单独用会出问题
很多人加了 img { width: 100%; } 就以为万事大吉，结果图片被压扁、父容器高度塌陷、或者大图在桌面端糊成一片。
-
width: 100%只控制宽度，高度默认按原始比例缩放——但前提是没设height；一旦你同时写了height: 200px，宽高比就彻底崩了 - 父容器若没设
max-width，width: 100%会让图片在大屏下无限撑开，远超原始分辨率，反而模糊 - Flex/Grid 容器中，
img默认有min-width: auto（Chrome 行为），导致它拒绝收缩，哪怕父容器变窄
真正安全的底线写法是：img { max-width: 100%; height: auto; display: block; }。其中 height: auto 是关键伴侣，不是可选。
srcset 和 sizes 不是“锦上添花”，而是加载逻辑开关
它们决定浏览器到底请求哪张图，而不是“让图变小”。写错或漏掉，高清屏照样加载 1x 图，小屏也可能拉取 2MB 大图。
立即学习“前端免费学习笔记（深入）”；
-
srcset必须配单位：用400w表示资源宽度，用2x表示设备像素比；混用（比如400w 2x）会导致整条规则失效，直接 fallback 到<img src> -
sizes只能写在<img>上，不能写在<source>里；语法错（如漏逗号、缺单位）会让浏览器按默认100vw计算 - 常见错误：
sizes="(max-width: 768px) 100vw, 50vw"但没提供对应 DPR=3 的图——iPhone 15 Pro Max 就会降级用 2x 版本，清晰度打折
验证是否生效？别猜，打开 DevTools → Network 面板 → 清缓存刷新 → 看实际请求的 URL 路径。
<picture> 不是自动响应，<source> 的 media 顺序错了就全废
<picture> 提供的是“艺术方向切换”能力（比如横幅图 vs 手机竖构图），不是尺寸适配主力。它完全依赖 <source> 的 media 属性和顺序。
-
media必须写在<source>标签内，<picture>上加无效；写成media="max-width: 768px"（缺括号）会被浏览器静默忽略 - 顺序必须从宽到窄：
min-width: 1200px→min-width: 768px→max-width: 767px；如果把小屏规则放最前，所有设备都卡死在那里 -
<img>是强制 fallback，必须存在、必须带src和alt；写成<img />或漏alt，图片区域就空白，且无报错提示
最容易被忽略的一点：<picture> 里的 <source> 只管“选哪组图”，不负责“这组图里选哪个分辨率”——那个任务仍由 srcset + sizes 在 <img> 上完成。
响应式图片真正的复杂点不在语法，而在责任划分：viewport 控制渲染视口，CSS 控制尺寸与比例，srcset/sizes 控制资源选择，<source media> 控制构图切换——四个层叠在一起，漏掉任何一层，效果就断档。
