Quote:
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?
Quote:
Originally Posted by Quoth
Also don't use h2 > img
|
How come? Is that a limited-compatibility thing?
Quote:
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.
Quote:
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.
Quote:
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.