[RbnJrg]

Originally Posted by robertmchicago

Thank you very much for taking the time to write these codes for me. We will definitely try them. Thanks again!

No problem. But use the following code (forget everything I wrote before) in your .css stylesheet:

p {
  text-align: justify;
}

h2 {
  font-size: 1.2em;
  text-align: justify;
  -webkit-column-break-before: always !important;
  page-break-before: always !important;
  break-before: always !important;
}

.container {
  height: 50%;
  margin: 0;
  text-align: center;
}

.picture {
  width: 100%;
}

@supports(max-height: 50vh) {
  .picture {
    height: auto;
    max-height: 50vh !important;
  }
}

@supports(display: flex) {
  .container {
    height: auto !important;
  }

  .picture {
    width: auto !important;
    max-width: 100%;
  }
}

It takes a lot to explain how it works but is for both, epub2 and epub3, for portrait and landscape mode; the fallback code for epub2 is already included.

Don't use <img> and don't use the "img" and "image-setup" styles. So, the following code must be erased:

CSS:

img {
display: inline-block;
width: 99%;
}

.image-setup {
text-indent: 0;
text-align: center;
margin: 0;
}

.page-break {
page-break-before: always;
break-before: page;
text-indent: 0;
margin: 1em 0;
}

HTML:

<p>text text text</p>

<h2 class="page-break">Nice Image</h2>
<div class="image-setup">
<img src="image1.jpg" alt="beautiful image one">
</div>

Instead, use the xhtml code I wrote in my previous post, that is:

  <h2>Your definition</h2>

  <div class="container">
    <svg class="picture" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 xxx yyy" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="xxx" height="yyy" xlink:href="../Images/your_image.jpg"/></svg>
  </div>

  <p>Your text</p>

(of course, instead of "xxx" and "yyy" must be the width and height of your image but the plugin will do all the work for you, so writing all that code won't cost you anything) and the .css in this post. After that, do your tests in ADE 2.x (it should be buried) and in any epub3 ereader. In my tests, it worked flawlessly (in portrait and landscape mode) in ADE 2.x, 3.x, KOReader (all of them, epub2 ereaders), the three Sigil plugins, Calibre Viewer and Thorium.