<figure> 是语义容器而非响应式控制器，需配合 CSS 的 aspect-ratio 和 img 的 srcset/sizes 实现语义、资源选择与尺寸控制三者协同，防止布局偏移。
<figure> 标签本身不提供响应式能力，但它为图片内容赋予明确的语义：这是一个自包含的、可独立引用的媒体单元。配合 <img> 的 srcset 和 sizes，它能让语义与行为协同——既告诉浏览器“这是什么”，也告诉浏览器“该怎么加载和展示”。
figure 是语义容器，不是尺寸控制器
<figure> 只表示结构意义，比如一张图表、一张新闻配图、一段代码截图。它不参与宽高计算，也不自动缩放图片。
- 错误写法：
<figure><img src="photo.jpg" srcset="..."></figure>
没有 CSS 约束时，图片仍按原始尺寸渲染，可能撑破布局或变形。
- 正确思路：
figure负责语义包装，img负责资源选择，CSS 负责尺寸与比例控制。
必须用 CSS 锁定 figure 的宽高比和响应行为
仅靠 srcset 无法防止布局偏移（CLS），必须让容器提前预留空间。
- 推荐组合：
figure { width: 100%; aspect-ratio: 16/9; /* 或 4/3、1/1 等实际比例 */ margin: 0; } figcaption { font-size: 0.875rem; text-align: center; margin-top: 0.5rem; } img { width: 100%; height: 100%; object-fit: cover; /* 或 contain，依设计需求选 */ display: block; } - 注意点：
-
aspect-ratio在 Safari 15.4+ 支持，旧版需用padding-top技巧降级； -
height: 100%需配合父容器有明确高度（如aspect-ratio提供）才生效； -
object-fit不改变容器尺寸，只控制图片在框内的裁剪方式。
-
srcset + sizes 仍要写在 img 上，figure 不接管资源选择
<picture> 或 <img> 才是资源调度主体，<figure> 只是外层语义壳。
- 合理结构示例：
<figure> <img src="photo-small.jpg" srcset=" photo-480w.jpg 480w, photo-800w.jpg 800w, photo-1200w.jpg 1200w " sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" alt="夕阳下的海岸线" width="1200" height="675" > <figcaption>摄于2026年5月，青岛石老人海滩</figcaption> </figure> - 关键细节：
-
width和height写在 HTML 中，按原图比例设置，帮助浏览器预留空间、减少布局偏移； -
sizes必须匹配 CSS 中figure实际占位宽度（比如33vw对应三栏网格中的单列）； -
figcaption是可选但推荐的语义补充，增强可访问性与 SEO。
-
不要用 figure 替代响应式逻辑
有人误以为套上 <figure> 就算“响应式了”，其实：
-
<figure>不会自动适配屏幕； -
<picture>里嵌<figure>也没额外收益，反而增加嵌套层级； - 如果需要艺术方向切换（如横图切竖图），该用
<picture>+<source media>，而不是依赖<figure>。
语义清晰 + 资源精准 + 尺寸可控，三者缺一不可。
