全屏插图

全屏插图用于让一张图片独占阅读页，避免与正文混排。它适合封面式插图、章节大图和跨页图片。

适合用在

• 需要独占一页的章节插图
• 希望覆盖整个阅读页的封面式图片
• 需要分别展示左侧或右侧区域的跨页大图

1. 声明 EPUB 3 前缀

在 OPF 的 package 节点声明 Reeden vocabulary：

<package
  xmlns="http://www.idpf.org/2007/opf"
  version="3.0"
  unique-identifier="book-id"
  prefix="reeden: https://reeden.app/epub/vocab/#">

2. 在 manifest 声明 XHTML

<manifest>
  <item
    id="full-image"
    href="Text/full-image.xhtml"
    media-type="application/xhtml+xml" />
</manifest>

3. 标记书脊项目

在 spine/itemref 的 properties 中选择全屏模式：

<spine>
  <itemref idref="full-image" properties="reeden:page-fullscreen" />
</spine>

idref 必须对应 manifest 中的 XHTML 资源 ID，而不是图片文件名。

4. 保留可独立显示的图片

对应 XHTML 仍应包含普通图片内容：

<body>
  <p>
    <img src="../Images/full-image.jpg" alt="章节全屏插图" />
  </p>
</body>

为了稳定获得独占页效果，对应 XHTML 应基本只包含这一张有效主图。图片前存在大量正文、图片太靠后或同页包含多张图片，都可能破坏预期效果。

选择全屏模式

properties 可以同时包含其他 EPUB property，不同名称之间使用空白分隔。

为不同屏幕准备多张比例

手机、平板、横屏的宽高比差别很大，一张图很难同时贴合所有屏幕。可以给同一张全屏图多做几个比例的版本，Reeden 会按当前屏幕挑比例最接近的一张；转屏或调整窗口大小后，会重新挑选。

以封面为例，准备 3:4、9:16、9:20 三张，版本文件在主图文件名后加 ~宽x高：

Images/cover.jpg         主图（3:4），平板、横屏和其他阅读器使用
Images/cover~9x16.jpg    9:16 版本
Images/cover~9x20.jpg    9:20 版本，长屏手机使用

在 manifest 中登记全部图片，版本的 id 同样在主图 id 后加 ~宽x高：

<manifest>
  <item id="cover-page" href="Text/cover.xhtml" media-type="application/xhtml+xml" />
  <item id="cover.jpg" href="Images/cover.jpg" media-type="image/jpeg" properties="cover-image" />
  <item id="cover~9x16.jpg" href="Images/cover~9x16.jpg" media-type="image/jpeg" />
  <item id="cover~9x20.jpg" href="Images/cover~9x20.jpg" media-type="image/jpeg" />
</manifest>
<spine>
  <itemref idref="cover-page" properties="reeden:page-fullscreen-spread" />
</spine>

XHTML 只引用主图，版本图不需要出现在正文里：

<body style="margin: 0; padding: 0;">
  <p style="margin: 0; text-indent: 0;">
    <img src="../Images/cover.jpg" alt="封面" style="width: 100%;" />
  </p>
</body>

规则：

• 后缀支持 ~宽x高（比例可以带小数，如 ~9x19.5）和多看的 ~slim，~slim 算作其中一张。其他后缀不识别。
• 选哪张按图片的真实宽高计算，后缀只用来配对；后缀写的比例和图片实际不符，也按实际尺寸选。
• 配对时先看 manifest 的 id，所以文件名经过混淆（如 Images/_x81.jpg）也能配上。没有登记进 manifest 的图片按同目录的文件名配对。建议全部登记，这样能通过 EPUB 校验。
• 版本图可以和主图格式不同，例如主图 cover.jpg，版本 cover~9x20.png。
• 只对全屏页（上面四种全屏模式）的主图生效，普通插图不会挑选版本。
• 版本只解决比例问题，挑好之后仍按所选全屏模式显示：reeden:page-fullscreen 留白不超过 5% 时裁剪铺满，reeden:page-fullscreen-spread 始终完整显示。

比例建议：

9:18 左右的屏幕离 9:16 和 9:20 都差约 10%，如果希望这类屏幕也贴边，可再加一张 ~9x18。

兼容多看：多看只识别 ~slim（9:20）一张版本。需要兼顾多看时，把长屏版本命名为 ~slim，其他比例照常用 ~宽x高；多看会忽略这些文件，Reeden 会让它们全部参与挑选。

常见问题

准备了多个比例，但显示的还是主图

• 确认版本的文件名或 manifest id 是在主图名后直接加 ~宽x高，扩展名放在最后，例如 cover~9x16.jpg，不是 cover.jpg~9x16。
• 确认这一页使用了上面任一全屏模式；普通章节里的插图不会挑选版本。
• 横屏、平板时显示 3:4 主图是正常结果。

插图没有独占页面

确认 property 写在 spine/itemref 上，而不是 manifest item 上；idref 必须与 manifest 的 id 完全一致。对应 XHTML 应以一张主图为主。

EPUB 3 报告未知前缀

检查 package 节点是否包含完整的 prefix="reeden: https://reeden.app/epub/vocab/#" 声明。

兼容写法

相关文档

• 页面出血
• 扩展全集