figure 标签配合 imgsrcset 对响应式图片语义的优化-H5教程-PHP中文网

是语义容器而非响应式控制器，需配合 css 的 aspect-ratio 和 img 的 srcset/sizes 实现语义、资源选择与尺寸控制三者协同，防止布局偏移。

figure 标签配合 imgsrcset 对响应式图片语义的优化

<figure></figure> 标签本身不提供响应式能力，但它为图片内容赋予明确的语义：这是一个自包含的、可独立引用的媒体单元。配合 <img> 的 srcset 和 sizes，它能让语义与行为协同——既告诉浏览器“这是什么”，也告诉浏览器“该怎么加载和展示”。

figure 是语义容器，不是尺寸控制器

<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></picture> 或 <img> 才是资源调度主体，<figure></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="夕阳下的海岸线"   style="max-width:90%" height="675"><figcaption>摄于2026年5月，青岛石老人海滩</figcaption></figure>

关键细节：
- width 和 height 写在 HTML 中，按原图比例设置，帮助浏览器预留空间、减少布局偏移；
- sizes 必须匹配 CSS 中 figure 实际占位宽度（比如 33vw 对应三栏网格中的单列）；
- figcaption 是可选但推荐的语义补充，增强可访问性与 SEO。

不要用 figure 替代响应式逻辑

有人误以为套上 <figure></figure> 就算“响应式了”，其实：

<figure></figure> 不会自动适配屏幕；
<picture></picture> 里嵌 <figure></figure> 也没额外收益，反而增加嵌套层级；
如果需要艺术方向切换（如横图切竖图），该用 <picture></picture> + <source media></source>，而不是依赖 <figure></figure>。

语义清晰 + 资源精准 + 尺寸可控，三者缺一不可。