是天然图文语义化容器，响应式对齐依赖父容器空间而非视口宽度，可通过浮动、flex 或 grid 实现不同场景布局，配合 max-width: 100%、aspect-ratio 和 clamp() 控制图像与文字弹性缩放。

<figure></figure> 标签天然适合做图文一体的语义化容器，它本身不带默认样式，但配合 CSS 能轻松实现响应式对齐——关键不是“适配屏幕宽度”，而是让 <figure></figure> 在它所处的父容器空间内自适应排布。

figure 容器本身的响应式对齐逻辑

<figure></figure> 是块级元素，它的对齐行为取决于内部内容（如 <img> 和 <figcaption></figcaption>）以及外部布局上下文。真正起作用的是三类控制方式：

• 浮动对齐（传统但仍有价值）：适用于文字环绕场景

  figure { 
    float: right; 
    width: 30%; 
    margin: 0.5em; 
  }
  figure img { 
    max-width: 100%; 
    height: auto; 
  }

  注意：必须加 max-width: 100% 防止图片溢出；width: 30% 是相对于其最近的块级父容器，不是视口。

• Flex 布局对齐（推荐用于单图+标题结构）

  figure {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  figcaption {
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: #555;
  }

  这样无论父容器多宽，图片和标题始终居中堆叠，且自动缩放。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

• Grid 布局对齐（适合多图并列或图文分栏）

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }
  figure {
    margin: 0;
  }
  figure img {
    width: 100%;
    height: auto;
  }

  父容器用 auto-fit + minmax()，子 <figure></figure> 自动按可用空间均分，无需媒体查询。

图片与文字在 figure 内的响应式比例控制

不要只靠 width 或 height 固定尺寸，而应让图像自身具备弹性：

• 给 <img> 设置 max-width: 100% 和 height: auto，确保不撑破容器
• 若需保持宽高比（比如 4:3 的缩略图），用 aspect-ratio: 4/3（现代浏览器支持良好）
• <figcaption></figcaption> 文字默认随容器缩放，必要时用 clamp(0.875rem, 1.2vw, 1rem) 控制字号流体变化

避免常见错位问题

• <figure></figure> 不要嵌套在 <p></p> 里（HTML 规范禁止）；正确结构是 <figure></figure> 与 <p></p> 并列于 <main></main> 或 <article></article> 下
• 不要用 text-align: center 试图居中整个 <figure></figure>，它只影响内联内容；块级居中请用 margin: 0 auto（需设宽度）或 Flex/Grid
• 如果 <figure></figure> 出现在窄列（如侧边栏），width: 30% 可能太宽，建议改用 max-width: 200px 或 inline-size: max-content 配合 overflow: hidden

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！