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