Variable/fixed image height

[ElMiko]

Originally Posted by RbnJrg

The Readium Sigil plugin displays nice in my system the epub you posted here. But maybe your issue is because the height of your Readium's window is lower than 32em (the height you are using for the image).

Nope, that's not it. Tested at 10em and 20em. As you can see the text shifts up and down the page according the em units assigned to the image, but the image remains full screen....

I wonder if this is a bug.

[RbnJrg]

Originally Posted by ElMiko

Nope, that's not it. Tested at 10em and 20em. As you can see the text shifts up and down the page according the em units assigned to the image, but the image remains full screen....

I wonder if this is a bug.

I was able to reproduce your issue in Readium plugin.



It's not a bug, it's your code; the issue is originated by the font size employed in Readium. When the size is lower than 80% the text overlaps the image. In fact, the text overlaps the image even with a size of 100%, but because the white space that surrounds the image you can't see that. As I said, don't use "em" to set the height of the image.

[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:

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.

[ElMiko]

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:

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?

[RbnJrg]

Originally Posted by ElMiko

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)?

You are defining the height in two places: in the parent element and in the image tag, so Readium is taking the height of the parent element. You need to add !important to the size of the image to give it priority:

.autoIMG {
	text-indent: 0;
	text-align: center;
	max-height: 32em;
	margin: 0;
	}
.autoIMGimage {
	width: auto;
        max-height: 32em !important;
	margin: 0 auto;
	display: block;
	}

Of that way, the height of the image will be ten times the height of the font.

@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?

The issue is with your original code; I didn't change anything to reproduce the problem.

[ElMiko]

Originally Posted by RbnJrg

You are defining the height in two places: in the parent element and in the image tag, so Readium is taking the height of the parent element. You need to add !important to the size of the image to give it priority:

.autoIMG {
	text-indent: 0;
	text-align: center;
	max-height: 32em;
	margin: 0;
	}
.autoIMGimage {
	width: auto;
        max-height: 32em !important;
	margin: 0 auto;
	display: block;
	}

Of that way, the height of the image will be ten times the height of the font.



The issue is with your original code; I didn't change anything to reproduce the problem.

Perfect! Thank you!

(Also, I meant what was changed from the first time you looked at it in the readium plugin (when it worked) and when you looked at my code straight up (which was failing), and it's the "!important").