File last modified on August 18, 2022

Full Page Image

If full page images in content are found they should follow the flow of content and if the image comes in between a paragraph it should be moved to the closest <p> depending on how placement falls.

Note

If an ePub has a print edition then a pagebreak must exist before and after.

HTML

html
1<a epub:type="pagebreak" id="page123" title="123"></a>
2<div id="img123" class="fullpage">
3  <img src="../img/page123.png" alt="foo bar" />
4</div>
5<a epub:type="pagebreak" id="page124" title="124"></a>

CSS

CSS used for the title page can also be used:

css
1.fullpage {
2  width: 100%;
3  text-align: center;
4  page-break-inside: avoid !important;
5  page-break-after: always !important;
6}
7.fullpage img {
8  display: inline-block;
9  width: 100%;
10  margin: 0 auto;
11}

Code Example

ON THIS PAGE

Documentation

Introduction

Guidelines

META-INF

OPF

CSS

Fonts

Images

XHTML

TOC / NCX

Full Page Image

HTML

CSS

Code Example