单图预览

单图扩展用于给正文中的重点图片补充明确的单图语义，并让大图预览携带主标题和副标题。普通图片本身也可以打开预览，这个扩展的重点是题注关联。

适合用在

• 地图、平面图和路线图
• 人物关系图
• 字体较小、需要放大查看的信息图
• 带主标题或补充说明的重点插图

推荐写法

<div class="reeden-image-single">
  <img src="../Images/map.jpg" alt="区域地图" />
  <p class="reeden-image-main-title">区域地图</p>
  <p class="reeden-image-subtitle">点击图片查看大图</p>
</div>

结构要求

• 容器使用 reeden-image-single。
• 容器中只放一张主图。
• 主标题使用 reeden-image-main-title，可以省略。
• 副标题使用 reeden-image-subtitle，可以省略。
• 标题必须放在单图容器内；图片仍应填写准确的 alt 文本。

容器中放入多张图片时，题注只会关联第一张图片，因此每个容器只放一张主图。

常见问题

图片可以显示，但没有题注

确认标题元素位于 reeden-image-single 容器内，并使用了正确的主标题或副标题 class。

预览中没有对应题注

确认 reeden-image-single 写在包含图片的祖先容器上，题注位于同一容器内，并且容器没有放入多张主图。

兼容写法

相关文档

• 图片画廊
• 富文本脚注
• 扩展全集