Figures and Images

Tags

  • <figure>
  • <figcaption>
  • <img>

Classes

For use with <figure> or <div> only

  • .full-width
  • .float-left
  • .float-right

See the Pen Figures by BH Direct (@bhdirect) on CodePen.

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.

Full Page Image HTML

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

Full Page Image CSS

CSS used for the title page can also be used:

.fullpage {
  width: 100%;
  text-align: center;
  page-break-inside: avoid !important;
  page-break-after: always !important;
}
.fullpage img {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
}

Full Page Image Code Example