响应式图片必须分三层解决：渲染控制（max-width:100%+height:auto）、资源选择（srcset+sizes）、布局适配（如aspect-ratio或grid约束）；漏任一层将导致小屏卡顿、大屏模糊或网格错位。
直接说结论：经典网页布局里，响应式图片不是“加个 max-width: 100% 就完事”，它必须分三层解决——渲染控制、资源选择、布局适配；漏掉任何一层，小屏卡顿、大屏模糊、网格错位就全来了。
img 标签必须配 max-width: 100% 和 height: auto 才算起步
只写 max-width: 100% 是常见翻车点：图片宽度被压住，但高度没联动，结果被拉扁或压成一条线。尤其在 flex 容器里，img 默认有 min-width: auto，会卡住缩放，必须额外加 min-width: 0。
-
height: auto不是可选项，是保比例的底线；漏掉它，max-width就失去意义 - 别用
width: 100%替代——小图会被强行撑开失真 - 父容器若用了
display: flex或display: grid，margin: 0 auto居中会失效，得换方案 - 移动端 Safari 旧版本对
object-fit支持弱，没设明确宽高的容器里它根本不起作用
srcset + sizes 组合才是真响应式，不是“写了就生效”
浏览器选图逻辑很实在：它先看 sizes 算出“这张图要显示多宽”，再从 srcset 里挑最接近且不小于该宽度的资源。写错 sizes，等于白写 srcset。
-
sizes必须匹配真实布局宽度，比如 Grid 中占 1/3 宽，断点在 768px，就得写sizes="(max-width: 768px) 100vw, 33.33vw"，不能硬填100vw -
srcset里只能统一用w描述符（如"small.jpg 480w"）或统一用x（如"low.jpg 1x"），混用会导致整个属性被忽略 - 旧版 Safari（12.1 前）和 EdgeHTML 对
w描述符支持不稳，iOS 有时只按 DPR 粗略匹配 - CDN 或服务端重写请求头时，可能绕过
srcset决策，导致始终加载 fallback 图
CSS Grid 布局图片网格，别碰 flex-wrap
用 flex-wrap 做相册或图库，最后一行留白、列宽不均、异步加载后断行错位是常态。Grid 的 auto-fit + minmax() 才是稳定解，但有几个硬约束。
- 核心写法是
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))：每列最小 250px，够宽就自动加列，填满整行 - 必须用
gap控制间距，别用margin模拟——否则网格对齐逻辑会崩；IE10+ 可用grid-column-gap替代 - 图片宽高比差异大时，单靠
aspect-ratio: 4/3不够，得套一层div并设overflow: hidden防拉伸 - 每个图单元必须用
figure包裹，figcaption要设display: inline-block或flex，否则默认块级会强制换行
<picture></picture> 不是升级版 <img>，而是解决特定问题的开关
当需要竖屏裁人脸、横屏展全景，或优先加载 webp、不支持就退 jpg，<picture></picture> 才是唯一解。但它不是“更高级”，是“更专一”——条件不满足就跳过，顺序错了就全失效。
-
<source></source>的media和type是 AND 关系：media="(min-width: 768px)" type="image/webp"必须同时满足，缺一不可 - 拼错
type="image/webp;"（多加分号）或浏览器不支持该 MIME 类型，整条<source></source>就被忽略 - 兜底的
<img>必须存在，且不能省略src和alt，否则降级失败 - 媒体查询值别写
(max-width: 767px)，而应写(max-width: 768px)，避免断点缝隙
真正麻烦的从来不是语法写不对，而是 CSS 布局变了但 sizes 没同步更新，或是 srcset 提供的宽度候选值和实际渲染宽度差了一截——这种偏差在高 DPR 屏上会被放大，一张图加载两倍体积都察觉不到，直到用户反馈“手机打开特别慢”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
