Quote:
Originally Posted by QuietShelfLife
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. |
I'm sorry. But I'm still confused... At 10em shouldn't the image be ten times the height of the font (at whatever size)?
If so, why is it always full screen in my example?
@RbnJrg - you say you got the code to replicate the effect, but what did you change from your previous attempt with the same code that appeared to be producing a normal image?