Answers.Body: <p>Either put the images in their own html files or use the code above, <code>page-break-before</code>, or -after. </p>
  
  <p>In these situations I generally use the css <code>height: 100%</code>, on both the container and the image itself, so if you use </p>
  
  <pre><code>&lt;div class="fullscreenimage"&gt;&lt;img src="some-image.jpg" alt="lalala" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>you could create this css rule that does what you want:</p>
  
  <pre><code>div.fullscreenimage , div.fullscreenimage img {height: 100%;}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-05-21T16:38:43.590Z
Answers.Text: You're not understanding the question. The don't want text to cut off because an image is shown. Putting in a hard page break before an image (usually) results in a partial page of text before the image
Answers.UserDisplayName: Stephen R
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-28T12:21:23.733Z
Answers.LastActivityDate: 2017-09-28T12:21:23.733Z
Answers.UserDisplayName: Ryn
Answers.Body: <p>The other suggestions didn't work for the device I'm using (reMarkable). However, I found an epub file that looked right so grabbed the cover page from that. It's an xhtml file with the contents as follows:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='utf-8'?&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
          &lt;meta name="calibre:cover" content="true"/&gt;
          &lt;title&gt;Cover&lt;/title&gt;
          &lt;style type="text/css" title="override_css"&gt;
              @page {padding: 0pt; margin:0pt}
              body { text-align: center; padding:0pt; margin: 0pt; }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1399 2200" preserveAspectRatio="none"&gt;
                  &lt;image width="1399" height="2200" xlink:href="cover.jpeg"/&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>A little hacky but works. It basically fills the entire page with an SVG tag and I guess the image resizes itself to fit. You can probably play with the aspect ratio if you wish but on the correct aspect device it looks fine.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-27T07:57:17.860Z
Answers.Text: For devices that understand SVG, this is the most reliable way of doing it.
Answers.UserDisplayName: Moilleadóir
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-17T22:03:24.957Z
Answers.LastActivityDate: 2018-08-18T09:10:32.953Z
Answers.LastEditDate: 2018-08-18T09:10:32.953Z
Answers.UserDisplayName: PhilT
Answers.Body: <p>I'm not going to claim that my solution is what was asked for, as I'm not sure epub can support the exact solution which the o/p requested. But my solution is much closer than the other answers posted here, and might be as close as you can get to the desired answer in epub.</p>
  <p>This is what I put in the <strong>head</strong> section of the .html page -</p>
  <pre><code>&lt;head&gt;
     &lt;link href=&quot;../stylesheet.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;/head&gt;
  </code></pre>
  <p>This is what I put in the <strong>body</strong> text -</p>
  <pre><code>&lt;p&gt;Text of last paragraph before the image tag. Add some dummy text here, running to half-a-dozen lines on screen in your ebook reader.&lt;/p&gt;
  
  &lt;!-- Image tag --&gt;
  &lt;span style=&quot;text-indent:0&quot;&gt;
    &lt;img class=&quot;image-float&quot; src=&quot;../Image.jpg&quot; /&gt;
  &lt;/span&gt;
  
  &lt;p&gt;Text of next paragraph after the image tag. Add some dummy text here, running to half-a-dozen lines in your ebook reader.&lt;/p&gt;
  </code></pre>
  <p>The crucial bit is whether you specify the class as <strong>image-float</strong> or as <strong>image-full</strong> (see stylesheet, below).</p>
  <p>This is what I put in the cascading style sheet (<strong>stylesheet.css</strong>) -</p>
  <pre><code>.image-full {  /* Inline Images : Full Page */
    display: inline-block;  /* Does not add line-break after */
    margin: 0 auto;         /* Alternative: 1em auto */
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 100%;
    height: 100%;    /* Expands image to the full height of page */
    /* Omit height option if need to include text with the image */
    }
  
  .image-float {  /* Inline Images : Floating */
    display: inline-block;  /* Does not add line-break after */
    float: left; position: relative;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 1em;
    max-width: 66%;  /* Limits image width to 66% of the page width */
    border: 1px solid;
    }
  </code></pre>
  <p>I can only test this in a limited number of readers.</p>
  <p>Looking at the result on my laptop running Windows 7, in <strong>Calibre's Ebook Viewer</strong> (for Windows), it does flow the text around the image, certainly if you specify the class as <strong>image-float</strong> in the <strong>img</strong> tag.</p>
  <p>I'm going to give <a href="https://calibre-ebook.com/" rel="nofollow noreferrer">Calibre</a> an unsolicited plug. As free software for Windows, it includes an <strong>ebook management program</strong> which can convert almost any ebook format to almost any other; plus it comes with an <strong>eBook editor</strong>, that edits in epub format (but the main program can then convert the result to almost any format you need); and it also comes with an <strong>eBook Viewer</strong> in which you can read your ebook in Windows.</p>
  <p>There are also versions for Mac and Android (but I've only been using the Windows version).</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-06-03T20:19:30.383Z
Answers.LastActivityDate: 2023-06-03T20:19:30.383Z
Answers.UserDisplayName: Ed999
Answers.Body: <p>I have some ideas here, but I haven't tested it out. Also, a lot depends on support on reading system. </p>
  
  <p>In epub3, it's possible to use CSS to force a page break before or after an element. Something like this: <code>img.fullpage {page-break-after: always;}</code></p>
  
  <p>Conversely, you could use <code>img.fullpage {page-break-before: always;}</code></p>
  
  <p>The only catch is that it's not supported in Google Play Books. I think it works in some (most?)  Kindles. </p>
  
  <p>As you describe the problem, font-size is irrelevant. </p>
  
  <p>Also,  your css code should let the image resize depending on screen size. I use max-width.  On kindles, max-width is NOT supported, so here's how I do it. <a href="https://kdp.amazon.com/community/thread.jspa?messageID=1005910&amp;" rel="nofollow noreferrer">https://kdp.amazon.com/community/thread.jspa?messageID=1005910&amp;</a></p>
  
  <p>One more thing. Because of the flakiness of support for page-break-after, I try to put images at the beginning or end of chapters. </p>
  
  <p>This formatting issue shouldn't be hard if everybody supported epub3 adequately. Unfortunately some reading systems -- and some older devices don't. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-27T16:33:25.543Z
Answers.Text: Hi! This doesn't really do what I want. I'm looking for a way to have the full-page image float around so that it won't break the text off early. When I change the font-size, it shouldn't suddenly break a page of half-way through to make the image full size, it should just push the image later in the text.
Answers.UserDisplayName: Ricky Morse
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-28T17:28:17.683Z
Answers.Text: I don't understand what you mean in the last sentence. Have you tried the clear property? https://www.w3schools.com/cssref/pr_class_clear.asp
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-27T15:48:12.560Z
Answers.LastActivityDate: 2017-09-27T15:48:12.560Z
Answers.UserDisplayName: idiotprogrammer
Answers.Body: <p>This is what worked for me on Remarkable Table (Remarkable 1)</p>
  <p>Under Text &gt; cover.xhtml</p>
  <pre><code>    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;
    &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;&gt;
  
  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;/&gt;
    &lt;meta name=&quot;calibre:cover&quot; content=&quot;true&quot;/&gt;
    &lt;title&gt;Cover&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;img id=&quot;logo&quot; src=&quot;../img/workbook.png&quot;/&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Under Styles &gt; dotepub.css, i placed the following content. Edit the height and width to match your picture.</p>
  <pre><code>#logo {
      display: inline;
      border: 0;
      height: 32px;
      width: 160px;
      margin: 0 0 2em 0;
      padding: 0;
  }
  </code></pre>
  <p>Placed the workbook.png file under Images &gt; workbook.png</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-01-24T12:08:02.497Z
Answers.LastActivityDate: 2021-01-24T12:08:02.497Z
Answers.UserDisplayName: Aravind
Body: <p>I'm interested in taking some text and making an ePub e-book out of it. It has full-page images in it. Is there some way in ePub to make an image become a full-page image that properly gets reflowed when the font size changes? That is, I want the image to always take up a full page, but when the font size changes, the text should reflow so that the image is still full page, but doesn't break the text off on the previous page.</p>
  
  <hr>
  
  <p>I'm describing this very poorly.</p>
  
  <p>When I was a kid, I would read the novels my father had acquired when he was a kid. Nancy Drew, Hardy Boys, Rick Brant, Ken Holt, Tom Swift /Jr., etc.</p>
  
  <p>These books had a style of illustration, where every so often there would be a full-page illustration. It had a line from the text of book below it in italics. It was usually within a page or two of where the text it illustrated came from.</p>
  
  <p>I'd like to recreate this in an ePub book I'm formatting. There are pull-out illustrations, which don't need to be at a particular place in the text. If reading the book on a device which displays a page at a time, what I want to have happen is for the text to reach the bottom of a page, you "flip" the page, there is a full-page illustration, you "flip" again, and you're back reading the text. It shouldn't matter where the page breaks are, the text should flow to the end of a page, then the illustration, and then the text resumes. If I change the font size (because my eyes are getting worse), it should still be a full-page illustration that doesn't cause the previous page of text to break off half-way down.</p>
  
  <p>Is this possible?</p>
  
  <p>Thanks…</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2022-05-21T16:37:08.803Z
Comments.Text: Yes! Ebooks badly need this capability! Unfortunately i don't believe it can be done in the current format.  What ePub needs is an image attribute that says "display at the next page break", rather than " display here".
Comments.UserDisplayName: Stephen R
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2022-05-21T16:45:33.077Z
Comments.Text: The responders are not understanding the question, so I'll try to clarify. He's asking for the following:  Add an image to an ebook that displays full page, BUT doesn't cause text to cut off to show the image. Currently if the place you add a large image happens to be halfway down the screen, the text cuts off and the image is on the next page. Question is asking to place an image so that the text will naturally proceed to the bottom of the screen, and the next page shows the image. Meaning the placement of the image is relative to how the device is specifically reflowing the text.
Comments.UserDisplayName: Stephen R
Tags: <epub><image>
Title: How to create an ePub full-page image which properly reflows
UserDisplayName: Ricky Morse
ThreadText: # How to create an ePub full-page image which properly reflows
  
  (Asked by: username_0 on 2017-09-25)
  
  I'm interested in taking some text and making an ePub e-book out of it. It has full-page images in it. Is there some way in ePub to make an image become a full-page image that properly gets reflowed when the font size changes? That is, I want the image to always take up a full page, but when the font size changes, the text should reflow so that the image is still full page, but doesn't break the text off on the previous page.
  
  ---
  
  I'm describing this very poorly.
  
  When I was a kid, I would read the novels my father had acquired when he was a kid. Nancy Drew, Hardy Boys, Rick Brant, Ken Holt, Tom Swift /Jr., etc.
  
  These books had a style of illustration, where every so often there would be a full-page illustration. It had a line from the text of book below it in italics. It was usually within a page or two of where the text it illustrated came from.
  
  I'd like to recreate this in an ePub book I'm formatting. There are pull-out illustrations, which don't need to be at a particular place in the text. If reading the book on a device which displays a page at a time, what I want to have happen is for the text to reach the bottom of a page, you "flip" the page, there is a full-page illustration, you "flip" again, and you're back reading the text. It shouldn't matter where the page breaks are, the text should flow to the end of a page, then the illustration, and then the text resumes. If I change the font size (because my eyes are getting worse), it should still be a full-page illustration that doesn't cause the previous page of text to break off half-way down.
  
  Is this possible?
  
  Thanks…
  
  **Tags:** epub, image
  
  > **Comments:**
  > **username_1**: Yes! Ebooks badly need this capability! Unfortunately i don't believe it can be done in the current format.  What ePub needs is an image attribute that says "display at the next page break", rather than " display here".  
  > **username_1**: The responders are not understanding the question, so I'll try to clarify. He's asking for the following:  Add an image to an ebook that displays full page, BUT doesn't cause text to cut off to show the image. Currently if the place you add a large image happens to be halfway down the screen, the text cuts off and the image is on the next page. Question is asking to place an image so that the text will naturally proceed to the bottom of the screen, and the next page shows the image. Meaning the placement of the image is relative to how the device is specifically reflowing the text.  
  
  ---
  
  ## 5 answers
  
  ### Answer by username_2 on 2017-09-28. Score: 1
  
  Either put the images in their own html files or use the code above, `page-break-before`, or -after.
  
  In these situations I generally use the css `height: 100%`, on both the container and the image itself, so if you use
  
  ```
  <div class="fullscreenimage"><img src="some-image.jpg" alt="lalala" /></div>
  
  ```
  
  you could create this css rule that does what you want:
  
  ```
  div.fullscreenimage , div.fullscreenimage img {height: 100%;}
  
  ```
  
  > **Comments:**
  > **username_1**: You're not understanding the question. The don't want text to cut off because an image is shown. Putting in a hard page break before an image (usually) results in a partial page of text before the image  
  
  ---
  
  ### Answer by username_3 on 2018-08-17. Score: 1
  
  The other suggestions didn't work for the device I'm using (reMarkable). However, I found an epub file that looked right so grabbed the cover page from that. It's an xhtml file with the contents as follows:
  
  ```
  <?xml version='1.0' encoding='utf-8'?>
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
          <meta name="calibre:cover" content="true"/>
          <title>Cover</title>
          <style type="text/css" title="override_css">
              @page {padding: 0pt; margin:0pt}
              body { text-align: center; padding:0pt; margin: 0pt; }
          </style>
      </head>
      <body>
          <div>
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1399 2200" preserveAspectRatio="none">
                  <image width="1399" height="2200" xlink:href="cover.jpeg"/>
              </svg>
          </div>
      </body>
  </html>
  
  ```
  
  A little hacky but works. It basically fills the entire page with an SVG tag and I guess the image resizes itself to fit. You can probably play with the aspect ratio if you wish but on the correct aspect device it looks fine.
  
  > **Comments:**
  > **username_4**: For devices that understand SVG, this is the most reliable way of doing it.  
  
  ---
  
  ### Answer by username_5 on 2023-06-03. Score: 0
  
  I'm not going to claim that my solution is what was asked for, as I'm not sure epub can support the exact solution which the o/p requested. But my solution is much closer than the other answers posted here, and might be as close as you can get to the desired answer in epub.
  
  This is what I put in the **head** section of the .html page -
  
  ```
  <head>
     <link href="../stylesheet.css" type="text/css" rel="stylesheet" />
  </head>
  
  ```
  
  This is what I put in the **body** text -
  
  ```
  <p>Text of last paragraph before the image tag. Add some dummy text here, running to half-a-dozen lines on screen in your ebook reader.</p>
  
  <!-- Image tag -->
  <span style="text-indent:0">
    <img class="image-float" src="../Image.jpg" />
  </span>
  
  <p>Text of next paragraph after the image tag. Add some dummy text here, running to half-a-dozen lines in your ebook reader.</p>
  
  ```
  
  The crucial bit is whether you specify the class as **image-float** or as **image-full** (see stylesheet, below).
  
  This is what I put in the cascading style sheet (**stylesheet.css**) -
  
  ```
  .image-full {  /* Inline Images : Full Page */
    display: inline-block;  /* Does not add line-break after */
    margin: 0 auto;         /* Alternative: 1em auto */
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 100%;
    height: 100%;    /* Expands image to the full height of page */
    /* Omit height option if need to include text with the image */
    }
  
  .image-float {  /* Inline Images : Floating */
    display: inline-block;  /* Does not add line-break after */
    float: left; position: relative;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 1em;
    max-width: 66%;  /* Limits image width to 66% of the page width */
    border: 1px solid;
    }
  
  ```
  
  I can only test this in a limited number of readers.
  
  Looking at the result on my laptop running Windows 7, in **Calibre's Ebook Viewer** (for Windows), it does flow the text around the image, certainly if you specify the class as **image-float** in the **img** tag.
  
  I'm going to give [Calibre](https://calibre-ebook.com/) an unsolicited plug. As free software for Windows, it includes an **ebook management program** which can convert almost any ebook format to almost any other; plus it comes with an **eBook editor**, that edits in epub format (but the main program can then convert the result to almost any format you need); and it also comes with an **eBook Viewer** in which you can read your ebook in Windows.
  
  There are also versions for Mac and Android (but I've only been using the Windows version).
  
  
  ---
  
  ### Answer by username_6 on 2017-09-27. Score: 0
  
  I have some ideas here, but I haven't tested it out. Also, a lot depends on support on reading system.
  
  In epub3, it's possible to use CSS to force a page break before or after an element. Something like this: `img.fullpage {page-break-after: always;}`
  
  Conversely, you could use `img.fullpage {page-break-before: always;}`
  
  The only catch is that it's not supported in Google Play Books. I think it works in some (most?) Kindles.
  
  As you describe the problem, font-size is irrelevant.
  
  Also, your css code should let the image resize depending on screen size. I use max-width. On kindles, max-width is NOT supported, so here's how I do it. <https://kdp.amazon.com/community/thread.jspa?messageID=1005910&>
  
  One more thing. Because of the flakiness of support for page-break-after, I try to put images at the beginning or end of chapters.
  
  This formatting issue shouldn't be hard if everybody supported epub3 adequately. Unfortunately some reading systems -- and some older devices don't.
  
  > **Comments:**
  > **username_0**: Hi! This doesn't really do what I want. I'm looking for a way to have the full-page image float around so that it won't break the text off early. When I change the font-size, it shouldn't suddenly break a page of half-way through to make the image full size, it should just push the image later in the text.  
  > **username_6**: I don't understand what you mean in the last sentence. Have you tried the clear property? https://www.w3schools.com/cssref/pr_class_clear.asp  
  
  ---
  
  ### Answer by username_7 on 2021-01-24. Score: 0
  
  This is what worked for me on Remarkable Table (Remarkable 1)
  
  Under Text > cover.xhtml
  
  ```
      <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="calibre:cover" content="true"/>
    <title>Cover</title>
  </head>
  
  <body>
    <div>
      <img id="logo" src="../img/workbook.png"/>
    </div>
  </body>
  </html>
  
  ```
  
  Under Styles > dotepub.css, i placed the following content. Edit the height and width to match your picture.
  
  ```
  #logo {
      display: inline;
      border: 0;
      height: 32px;
      width: 160px;
      margin: 0 0 2em 0;
      padding: 0;
  }
  
  ```
  
  Placed the workbook.png file under Images > workbook.png
  
  
  ---
  
  