View Single Post
Old 03-19-2026, 04:15 PM   #63
QuietShelfLife
Enthusiast
QuietShelfLife began at the beginning.
 
Posts: 37
Karma: 10
Join Date: Feb 2026
Device: iPad
RbnJrg nailed it — em units for image height are a trap because they're tied to font size, which is the one thing every EPUB reader actively lets users override. Your 20em image renders at one size with the default font, then completely different when someone bumps it up or down.

In practice, the most reliable approach I've found for constraining image height is max-height with viewport units:

Code:
max-height: 90vh; width: auto; height: auto;
Most modern readers (Apple Books, Readium-based apps, Thorium, Kobo) handle vh correctly now. The image scales relative to the screen rather than the font, which is what you actually want.

For older readers that don't support viewport units, max-height: 100% on the image with the parent container set to a percentage of the page height is the safest fallback. Not as precise, but at least it won't overlap text.

The fundamental issue is that EPUB wants everything reflowable and relative, but images are fixed-ratio content. Anything font-relative (em, rem, ex) will always be unpredictable for images.
QuietShelfLife is offline   Reply With Quote