HTML5响应式图片核心是、srcset和sizes：srcset按设备像素比或宽度选图，sizes告知浏览器图片渲染宽度以精准匹配资源，支持媒体查询实现艺术指导；三者需与CSS容器同步维护。
HTML5 原生支持响应式图片，关键不在“怎么写布局”，而在于用对 srcset 和 sizes 这三个机制——它们解决的是「不同设备加载合适尺寸/格式的图片」，不是靠 CSS 宽高撑满容器就能叫响应式。
什么时候该用 ![html5如何布局响应式图片_html5响应式图片布局方法]()
width: 100%
纯 CSS 拉伸图片（比如 max-width: 100%; height: auto）只是让图片“看起来”自适应，但浏览器仍会下载 src 指向的那张原始大图，浪费带宽、拖慢首屏。而 srcset 让浏览器自己选最合适的资源：
-
srcset提供多个分辨率版本（如"small.jpg 1x, medium.jpg 2x"），浏览器按设备像素比选 - 或提供多个宽度描述（如
"small.jpg 400w, medium.jpg 800w, large.jpg 1200w"），配合sizes属性决定加载哪张 -
src是降级兜底，必须保留，否则不支持srcset的老浏览器会空白
@@##@@
为什么 srcset 更适合艺术指导（Art Direction）
当不同屏幕下需要裁剪、缩放比例甚至完全不同的构图（比如手机竖图、桌面横图），srcset 只能被动适配尺寸。
- 每个
media、type（如image/webp）、srcset和sizes - 浏览器从上到下匹配第一个满足条件的
- 注意：IE 完全不支持
picturefillpolyfill 或服务端降级
@@##@@
sizes 不是 CSS，它的值直接影响浏览器资源选择逻辑
sizes 是一个字符串，告诉浏览器“这张图在当前页面布局中大概占多宽”，浏览器据此从 srcset 列表里挑最接近的资源。写错会导致加载过大或过小的图：
立即学习“前端免费学习笔记（深入）”；
-
sizes="100vw"表示图宽占视口 100%，适合全宽 banner -
sizes="(min-width: 600px) 50vw, 100vw"表示 ≥600px 时占半屏，否则占满屏 - 千万别写成
sizes="100%"或sizes="100px"——语法错误，浏览器直接忽略整个sizes，退化为仅按像素比选图 - 如果布局用 CSS Grid/Flex 控制图片容器宽度，
sizes必须和实际渲染宽度一致，否则预估失准
真正难的不是写对标签，而是维护多套图片资源并保证 srcset、sizes、CSS 容器三者同步——改了布局忘了调 sizes，或者新增了 3x 屏设备却没加对应 srcset 条目，都会让响应式失效。
