HTML5结构标签无默认样式，图片响应式需CSS控制；仅width:100%会导致拉伸，须配合max-width:100%和height:auto；figure语义化不等于响应式，需CSS约束宽高比；srcset与sizes需匹配DPR和视口宽度；Flex/Grid中图片塌陷常因父容器未设布局、min-width未重置或高度未限定。
HTML5结构标签本身不带默认样式，图片响应式必须靠CSS显式控制；盲目套用<figure></figure>或<picture></picture>不等于自动响应，关键在CSS的max-width、height和object-fit组合。
为什么<img alt="响应式图片方案：HTML结构标签与CSS属性的协作实践" >加width: 100%还不够
单纯写img { width: 100%; }会导致图片拉伸变形，尤其在宽高比固定的容器里。更常见的是父容器没设max-width，导致大屏下图片撑爆布局。
- 必须同时设置
max-width: 100%和height: auto，否则高宽比失守 - 若父容器是
flex或grid项，需确认其min-width未被设为auto（Chrome中默认行为会阻止收缩） -
<picture></picture>里的<source></source>只负责提供不同分辨率资源，不替代CSS尺寸控制
<figure></figure> + <figcaption></figcaption>不是“响应式开关”，而是语义增强点
<figure></figure>本身不参与尺寸计算，它只是告诉浏览器“这块内容自成一体”。真正起作用的是你给它的CSS——比如用display: grid配合aspect-ratio锁定缩略图比例。
- 错误用法：
<figure><img src="..." alt="响应式图片方案：HTML结构标签与CSS属性的协作实践" ></figure>却不给figure设宽高约束，结果img按原始尺寸渲染 - 推荐写法：
figure { width: 100%; aspect-ratio: 4/3; }+img { width: 100%; height: 100%; object-fit: cover; } - 注意
aspect-ratio在旧版Safari中需加-webkit-前缀，且不能与height冲突
用srcset和sizes前先理清设备像素比和视口宽度的关系
srcset里的2x指的是设备像素比（DPR），不是屏幕尺寸；sizes才是告诉浏览器“这张图在不同视口宽度下打算占多宽”。两者不匹配，高清屏照样加载小图。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：
sizes="(max-width: 768px) 100vw, 50vw"但srcset只提供image.jpg和image@2x.jpg，缺image@3x.jpg——iPhone 15 Pro Max（DPR=3）就会降级用2x - 安全写法：
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"+sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" - 工具建议：用
sharp或imagemin批量生成多尺寸图，别手动拼接srcset
Flex/Grid布局中图片塌陷的三个隐藏原因
明明写了flex: 1或grid-column: span 2，图片却缩成一条线——大概率是以下某个条件没满足。
- 父容器未设
display: flex或display: grid，或者被float或position: absolute打断了文档流 - 图片自身没有
min-width: 0（Flex项目默认min-width: auto，会阻止收缩） - 用了
object-fit: contain但容器高度未限定，浏览器无法推导出渲染高度
最常被忽略的一点：当图片作为Grid子项时，若父grid-template-columns用fr单位，而图片又没设height，它可能完全不显示——因为fr不提供固有高度参考。
