Image sizeing no longer working on some platforms?

[Vanguard3000]

*"sizing"

I feel like I'm going crazy here. I recently created an ebook with images in the <h2> headers (an alien language as chapter number), and styled it as I have many times before, with something like:

<h2><img style="height: 1em;max-width: 50%; object-fit: contain;" src="../Images/ch01.jpg"/><br/>Title</h2>

(I initially had this as a css class but it's the same either way). Everything looked fine in Sigil's preview pane as well as Calibre's book viewer, but on my Kobo Libra 2 (latest firmware) and MoonReader+ for Android, the image is full-size (it was a large image so it basically filled the screen). Other CSS classes and styles, such as font sizes, alignments, etc. work fine.

I've tried playing around with the specific size values, different images, and creating a brand new epub to no avail, and it's freaking me out a bit because I've been doing this for years and and can't see what I'm missing.

See an attached test epub and a screenshot of what it looks like in Moon+ reader. Thanks in advance for any help.

[Quoth]

Use a class and CSS rather than an Inline style anyway.
If you want correct aspect ratio and a percentage

<h2><img class="ch-image" src="../Images/ch01.jpg"/><br/>Title</h2>

.h2 {
// no left and right margins (or padding), but do center and set font & size
}

.ch-image {
image-width: 50%;
image-height: auto
}

[Vanguard3000]

As I mentioned in my initial post, I had it as a class originally, but it makes no difference to the problem I'm seeing so I simplified my example by inlining it.

In my actual book, I'm overriding h2 to center and style the text, then classing the image via "h2 > img".

[Quoth]

Originally Posted by Vanguard3000

As I mentioned in my initial post, I had it as a class originally, but it makes no difference to the problem I'm seeing so I simplified my example by inlining it.

In my actual book, I'm overriding h2 to center and style the text, then classing the image via "h2 > img".

Yes, but likely the H2 and image CSS was wrong.

[Vanguard3000]

Originally Posted by Quoth

Yes, but likely the H2 and image CSS was wrong.

If that were the case, the inline styling I've provided as an example ought to work. In any case, here is the stylesheet info from the actual file for reference:

h2,h3,h4 {
  page-break-after: avoid;
}

h2 {
  text-align: center;
  font-style: italic;
  font-size: 2.5em;
  font-weight: normal;
}

h2 > img {
  height: 1em;
  object-fit: contain;
}

Note that the h2 styling to the text (centred justification and italicized style) work as intended, so the stylesheet is linked correctly as far as I can tell.

[Quoth]

But your image style and class are both wrong.

You either set height and and width to px (never em or rem), or set one to auto and the other to a %

Anything else is unreliable.

Like
.ch-image {
width: 50%;
height: auto
}

Also don't use h2 > img

"object-fit: contain" will not be reliable and will distort as height: 1em

[azimuth]

The heading elements <h_> by default is block-level, which means it spreads full line width. It can be assumed that Moon+ is merely holding to the standards expected for the <h2> element and making your image also spread full line width regardless of your CSS.
And...you likely don't want the image to be 1em tall - that's the height of the words on that line, and your image is a fully detailed designed image that can only be viewed when its larger than 1em.
So...set the image outside of the <h2> element, and use the <img> tag as Quoth suggested: width: 50%; height: auto; .
Read the following at Mozilla.

MDN heading

MDN block image

[nabsltd]

Originally Posted by Quoth

You either set height and and width to px (never em or rem), or set one to auto and the other to a %

Agreed about setting either height/width to a value and the other to auto, as this maintains aspect ratio.

But, "em" is a perfectly valid way to declare the value, especially for height, if you want the image to scale with user font size changes. For an image that shouldn't change size with font size changes, then px or % would be correct.

[Vanguard3000]

Originally Posted by Quoth

You either set height and and width to px (never em or rem)

The sample you provided worked as it should (after removing the "image-" the attributes), but I specifically want the image to scale with the h2 text as it's technically a part of the chapter title, which is why I was using em for the height. Is there an alternative that satisfies that requirement?

Originally Posted by Quoth

Also don't use h2 > img

How come? Is that a limited-compatibility thing?

Originally Posted by Quoth

"object-fit: contain" will not be reliable and will distort as height: 1em

Again - how come? From what I can tell this is a common way to ensure an aspect ratio-respecting fit for an image.

In any case, thanks for your help so far. I'm self-taught with this stuff so if there are ways I can improve I'm happy to learn them.

Originally Posted by azimuth

The heading elements <h_> by default is block-level, which means it spreads full line width.

I experimented with this by changing the background color, and I would have thought that adding a <span> around the image would help - and it does with my debug background color but not with the image size.

Originally Posted by azimuth

And...you likely don't want the image to be 1em tall - that's the height of the words on that line

It is indeed what I want. The image in my example is a placeholder; the actual one is from a made-up language's number system, and so is technically part of the chapter's title (for the ToC I would use standard Arabic numerals). I don't think I was super clear about this in my original post but I've uploaded a new test file and image to better illustrate this. Thank you for your help so far.

--

I guess the crux of my issue is this: Is there a way to add an image within a paragraph or header block that scales properly with the text? I feel like this shouldn't be a difficult thing but it seems to elude me right now.

[azimuth]

Some web link solutions (for Epub3.0) below.
Epub2.0 won't allow CSS min/max, or calc(), or @supports, or @media. But with a bit of reading there you might find an alternate workable option. Moon+ App was a stumbling block even for me and involved additional CSS trickery (on a different CSS issue).

Simplified fluid font size:
CSS-tricks1
Viewport fluid font size:
CSS-tricks2

[JSWolf]

For images you want to scale, use SVG if you can so when it does scale, it will look OK.

[Quoth]

Set height and width (proportionately) in pt or em (1em = 12pt) for images that scale with user selected font size. But only works on some devices/apps. Unreliable!

Normally px should be used and images should not attempt to rescale with user font size selection.

[Quoth]

Originally Posted by JSWolf

For images you want to scale, use SVG if you can so when it does scale, it will look OK.

Yes. but there is no way to reliably autoscale with user changing font size. It sometimes works. I agree that if width or height is a % and the other is auto, then SVG is good, but for Amazon KDP simply downscaling a larger png or jpg (no transparency) works better.

[JSWolf]

Originally Posted by Quoth

Set height and width (proportionately) in pt or em (1em = 12pt) for images that scale with user selected font size. But only works on some devices/apps. Unreliable!

Normally px should be used and images should not attempt to rescale with user font size selection.

The problem with using px is that unless you know the screen the ePub is going to be read on, it could maybe be too large or too small.

[Jellby]

Originally Posted by JSWolf

The problem with using px is that unless you know the screen the ePub is going to be read on, it could maybe be too large or too small.

No, because a CSS px is an absolute unit equal to 1/96 inch. It is not a screen pixel.

Another thing, of course, is whether the reading application knows this and complies with it, but that's the realm of bugs and quirks.