epub, images, and my codes

[robertmchicago]

With my friend's help, I am making a reflowable epub in Sigil. One chapter has more than 350 definitions. Each definition has a heading and an explanation. More than 100 definitions also have an image. These definitions include a heading, an image, and an explanation. All images are full-width (width: 1200 pixels), and have a height between 300 and 900 pixels. No image has any caption.
Everything is working good. But we all know that images can create problems on different devices and apps, so I am trying to write the best code for images. Do I need to make any changes, adding or removing something, in these codes?
CSS:
img { display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.image-setup {
text-indent: 0;
text-align: center;
margin: 0 auto;
width: 99%;
page-break-before: auto;
page-break-inside: avoid;
page-break-after: auto;
}

HTML:
<p>text text text</p>
<div class="image-setup">
<img src="image1.jpg" alt="beautiful image one">
</div>
<p>text text text</p>
Thanks for your time, your help and insights

[RbnJrg]

Well, althought we don't know if you are working with epub2 or epub3, I would employ the following code:

img {
  display: inline-block;
  width: 99%; /* or whatever width you wish */
}

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

[robertmchicago]

I don't know why you removed all those, e.g., "page-break-inside: avoid", it helps so the image will not be split across two pages.
Please I need help from someone who is professional or knows what is best.

[DNSB]

If the image is too big to fit on a page, nothing will keep it from splitting. You might want to look at adding bits such as max-height and max-width. OTOH, since you appear to be using full page images with your splitting before and after, you may want to look at using an svg wrapper.

As for someone who is professional or knows editing epubs? I think you just insulted one of them.

BTW, page-break-before and page-break-after are replaced by break-before and break-after.

[Quoth]

Originally Posted by robertmchicago

I don't know why you removed all those, e.g., "page-break-inside: avoid", it helps so the image will not be split across two pages.
Please I need help from someone who is professional or knows what is best.

Because those don't do what you think they do.

BTW, page-break-before and page-break-after are replaced by break-before and break-after.

And still don't do what you want if the image is too big. Using a % width with no margins and centred and height auto is mostly good, but fails if the aspect of the image is taller than the ereader screen at width: 100%. There are solutions to that.

I might not always agree with RbnJrg, but RbnJrg is very professional and expert.

[RbnJrg]

Originally Posted by robertmchicago

I don't know why you removed all those, e.g., "page-break-inside: avoid", it helps so the image will not be split across two pages.
Please I need help from someone who is professional or knows what is best.

I know what is best You don't need "page-break-inside: avoid" because in the img style I am employing "display: inline-block". That property avoids the split of the image. Try the code I posted and you will see it should work perfectly (with an image whose width is higher than his height; do the try with a with of 50% and you'll see how the image is centered without "margin: 0 auto"; that is also due to the property "display: inline-block" joined with the property "text-align: center" in the "image-setup" style). Of course, the img won't split but it can originate blank spaces; since we don't know if you are working under epub2 or epub3, I can't tell you how to avoid (if it were possible) those blank spaces. By the way, under epub3, "page-break-inside: avoid" is not honored by epub3 ereaders.

And thank you very much DNSB and Quoth for your words about me; many thanks.

[JSWolf]

Originally Posted by RbnJrg

I know what is best You don't need "page-break-inside: avoid" because in the img style I am employing "display: inline-block". That property avoids the split of the image.

Wouldn't the image have to split to the next screen it if did not fit on the space available on the screen?

[Turtle91]

Originally Posted by JSWolf

Wouldn't the image have to split to the next screen it if did not fit on the space available on the screen?

In case you missed his explanation (emphasis added)…

Originally Posted by RbnJrg

I know what is best You don't need "page-break-inside: avoid" because in the img style I am employing "display: inline-block". That property avoids the split of the image. Try the code I posted and you will see it should work perfectly (with an image whose width is higher than his height; do the try with a with of 50% and you'll see how the image is centered without "margin: 0 auto"; that is also due to the property "display: inline-block" joined with the property "text-align: center" in the "image-setup" style). Of course, the img won't split but it can originate blank spaces; since we don't know if you are working under epub2 or epub3, I can't tell you how to avoid (if it were possible) those blank spaces. By the way, under epub3, "page-break-inside: avoid" is not honored by epub3 ereaders.

[RbnJrg]

Originally Posted by JSWolf

Wouldn't the image have to split to the next screen it if did not fit on the space available on the screen?

If the width of the image is higher than its heigh, then the property "display: inline-block" will avoid splitting. It can generate a blank space but the image won't split.

The OP had employed in the "image-setup" style, the property "text-align: center" and in the img tag the property "display: block". But "text-align: center" is useless if an element is displayed as block. That one, only works for "inline" or "inline-block" elements. So to avoid properties "page-break-inside: avoid" and "margin: 0 auto", with "display: inline-block" the property "text-align: center" will work, the image always will be centered (no matter the width) and won't split. The code employed is minimun.

[JSWolf]

Originally Posted by RbnJrg

If the width of the image is higher than its heigh, then the property "display: inline-block" will avoid splitting. It can generate a blank space but the image won't split.

The OP had employed in the "image-setup" style, the property "text-align: center" and in the img tag the property "display: block". But "text-align: center" is useless if an element is displayed as block. That one, only works for "inline" or "inline-block" elements. So to avoid properties "page-break-inside: avoid" and "margin: 0 auto", with "display: inline-block" the property "text-align: center" will work, the image always will be centered (no matter the width) and won't split. The code employed is minimun.

Images don't split. They either go off the screen or drop to the next screen.

[robertmchicago]

RbnJrg......First and foremost, please accept my sincere apologies if I hurt you in any way. We are working on epub3, but if a platform only supports epub2, we will need to work on that too. I will definitely try your codes. Thanks a lot. And Thank You for the explanations. I really like this forum!


Quoth......You talked about a problem and said there is a solution, but you didn’t tell us what the solution is. Could you please share it?

[RbnJrg]

Originally Posted by JSWolf

Images don't split. They either go off the screen or drop to the next screen.

Not always, depend on the ereader; with "display: inline-block" you'll be sure that images won't split.

[Jellby]

Aren't you assuming a screen in portrait orientation? What if someone wants to read in landscape orientation (and I know someone who does)?

[robertmchicago]

Originally Posted by Jellby

Aren't you assuming a screen in portrait orientation? What if someone wants to read in landscape orientation (and I know someone who does)?

I already searched a lot about landscape mode and PC apps, but I couldn’t find any solution.

[Turtle91]

Using ePub3 - if your targeted reader supports the css3 properties - you can use:
'object-fit: contain' as you mentioned, and maybe take a look at 'display: flex' .

You would need to provide fallback coding for devices that don't support them.

As DNSB mentioned, I use an svg wrapper that seems to be widely supported and works on ePub2/3 and doesn't care if the reading device is portrait or landscape, or if the image is wider than tall. But that really only works when you have an image taking up an entire page by itself. There are techniques to add text to the svg wrapper, but that is more in-depth. For your purposes I would stick with using the object-fit and display: flex for the ePub3 and fallback to the coding RbnJrg recommended.

Example SVG wrapper:

<html>
 <head>
    <title></title>     
    <style type="text/css">
        *   {margin:0; padding:0}
        div {width:100%; width:100vw; height:100%; height:100vh}
    </style>
</head>
<body>

<div>
  <svg 
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="573px" height="800px" 
    viewBox="0 0 573 800" 
    preserveAspectRatio="xMidYMid meet">
     <image width="573" height="800" xlink:href="../Images/your_img.png" />
  </svg>
</div>

</body> 
</html>