Images split over two pages

[Rogerfs]

I’m trying to edit an epub that displays many images split over 2 pages when I read it in iOS books or other reader (works fine on a kindle or kindle for iOS for example).

What should I do to avoid having an image split over 2 pages?



HTML/CSS that might be interesting below. This container 024 is one of many.

<div class="_idGenObjectLayout-1">
<div id="_idContainer024">
<img class="_idGenObjectAttribute-1" src="../Images/image00140.jpeg" alt=""/>
</div>
</div>

#_idContainer024 {
display:inline-block;
height:639px;
width:1200px;
}

img._idGenObjectAttribute-1 {
height:100.00%;
min-width:100%;
width:100.00%;
}

div._idGenObjectLayout-1 {
text-align:center;
}

[Quoth]

You set height OR width to a % (height if a portrait shape, width of landscape) and set the other size to auto. If the image is square you can do % on either.
You can't set both height & width to a % unless you know the screen aspect and the image aspect.

I'd avoid as much as 100% on either axis unless maybe something you want to nearly fill the screen. You can only fill the screen completely if the image is the same shape as the screen.

Also enclose the image in either its own <p or <div

Fragment of HTML
<p class="p-cen"><img src="images/00005.jpg" class="land-imag"/></p>
<p class="caption"><span class="bold">THEY WERE ALL THERE</span></p>
CSS
.p-cen{
  border-bottom: 0;
  border-top: 0;
  display: block;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  padding-bottom: 0;
  padding-top: 0;
  text-align: center;
  text-indent: 0
}

.land-img{
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 75%
}

You might have a top & bottom margin in the .p-cen to separate from text. You might have alt-text in the <img tag

My docx export imported to Calibre does all this except the .land-img CSS will be pixels so I edit it. Edit image css is the only edit I do of the ebook.