Leave out the margin statements and enclose in a paragraph.
<p class="centred"><img class="my_image" src="images/00014.jpg"></p>
.centred{
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 5px;
margin-bottom: 10px;
text-align: center
}
.my_image {
height: auto;
width: 80%; /* margin will automatically be 10% */
}
You MUST set height auto if you set width to a % or vice versa!
Margin would be 2.5% each side if you set 95%.
What you have won't work on loads of things, especially margin: auto;
You don't ever need to set max and min for large images. Just set a % of height OR width (and other to auto). Set small images absolute px.
You'll almost never see rem in ebooks.
Note that ebooks are like print aspect of web pages, not the screen aspect. ebooks use HTML, but they are not web pages.
Quote:
To make it even easier to write style rules that depend only on the default font size, CSS has since 2013 a new unit: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document. E.g., to give P and H1 elements the same left margin, compare this pre-2013 style sheet:
p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }
with the new version:
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
|
This is for screens of web pages, NOT ebooks. Don't use rem.
Also ebook users more commonly change the font size, overall margins, line spacing and even body font via the GUI than web browser users. Only a few platforms /apps allow scrolling like a web page, ebooks by default are paginated to the size of the screen.
Also to have conditional sizes you need javascript on web pages, an ebook doesn't have javascript. You want a lowest commomn denominator for the same epub2 to work converted to kepub, epub3, old mobi, dual mobi, azw3 and kfx.