Can't control image width

[RonOnThePond]

I've tried every combination of width, max-width, min-width, and even width: clamp that I can think of, and cannot get the desired result. I am obviously missing a key concept, and if anyone can help I would be immensely grateful.

All I want to do is set a minimum and maximum width for a jpg image, preferably in px. If the viewing area is wide enough, let max-width prevail. If not, reduce the width as needed until reaching min-width, and then shrink no further.

I've been working in Calibre 6.11 editor mode, uploading each test epub to my kindle library, and testing the result on my kindle signature edition (like a paperwhite), my Samsung tablet, and my pixel 5 phone. I have had terrible results with the official Kindle Previewer and have quit using it for now.

If there is a "right way" to set a range of widths for an image—no bigger than this, no smaller than that, and anywhere in between is fine—I can't find it. A typical example would be to set a max-width: 400px; min-width: 150px. I've tried this along with width: 100%. I've tried width: clamp(150px, 100%, 400px) and other variations of all of the above. It would seem most logical to me just to set min-width and max-width to create the acceptable range. I've tried including height: auto; and then not including it.

Why are the seemingly simple things so dang hard?

Thanks for any guidance you can offer.

Ron

[Quoth]

Set CSS height or width (class of img tag) to like 95% (2.5% margin either side, I use 90%) and other property to auto.
Don't set margins.
Have it in a paragraph that's centred and use that style for caption too

<p class="some-centred"><img class="generic-landscape" ... etc </img><p>
<p class="some-centred">My Caption</p>

CSS
.some-centred {
text-align: center;
margin-top: 0.5em; /* whatever space above image and caption */
margin-bottom: 0.2em; /* whatever space above image and caption */
}

.generic-landscape {
height: auto;
width: 95%; /* or as desired */
}

.generic-big-portrait {
height:95%; /* or as desired */
width: auto;
}

.generic-small-portrait {
height:33%; /* or as desired */
width: auto;
}

[nqk]

width: min(90%, 26rem); works for me

Sent from my Pixel 7 using Tapatalk

[Quoth]

Originally Posted by nqk

width: min(90%, 26rem); works for me

Sent from my Pixel 7 using Tapatalk

That's unreliable and how is better than width: 90%; ?

[nqk]

Originally Posted by Quoth

That's unreliable and how is better than width: 90%; ?

Ah, it is just a shorthand for 90% and max-width: 26rem. It works for me without issues.

Sent from my Pixel 7 using Tapatalk

[Quoth]

We test on 3 kinds/ generations of kindle, apps and 4 makers of epub based eink readers. 4.3″ LCD, 4.7″ eink up to 10″ eink and LCD. Also on desktop app viewer.

The pdb formats on Palm z22 isn't tested, nor LRF on Sony, but epub tested on 5″ Sony eink

[RonOnThePond]

This construct was new to me, so I've been experimenting with it. Mixed results:

.my_image {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 10px;
width: min(80%, 18rem);
}

In the Calibre editor's view pane, everything works perfectly, but my tablet (landscape position) does not respect the 80% min for one of these images (a jpeg, originating in my docx manuscript), showing it with what looks like about 20% of the screen width, not close to the 18rem maximum, which should have kicked in. But on my Kindle Signature reader the same image is full screen width, and on my Pixel 5 phone it looks like about 50% of the width. The distinguishing factor about this particular image is only that it came directly from the docx.

The other images are jpg files added to Calibre by me, not from the docx. On my Kindle they are full screen width. On my tablet the are much bigger than I'd expect for 18rem, certainly no 10% on either sid). Looks like about 50-60% with the tablet positioned sideways, and is about the same size with the tablet held in portrait position, taking up the entire screen width. Likewise, on my Pixel 5 the image is full screen width, with 10% on either side. Overall, I can live with this situation, but I don't know why the first image behaves differently, or why these other images seem to disregard the 18rem as a maximum.

Again, they all behave well in Calibre, and I'm trying to find some way of expressing a minimum and maximum image size that works well on my Kindle, and in the kindle app on the tablet and phone.

Maybe I'm asking for too much. If so, please tell me and I'll learn to live with it!

One question about the min(x, y) for width. Must the minimum (x) be expressed as a percentage? Would rem work for both numbers? with a percentage as the minimum, it would shrink forever, so I'm wondering if a fixed size would set a limit to the shrinking.

All of your input is very helpful and certainly educational, so thank you!

[Quoth]

Leave out the margin statements and enclose in a paragraph.

<p class="centred"><img class="my_image" src="images/00014.jpg"></p>

.centred{
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 5px;
margin-bottom: 10px;
text-align: center
}

.my_image {
height: auto;
width: 80%; /* margin will automatically be 10% */
}
You MUST set height auto if you set width to a % or vice versa!
Margin would be 2.5% each side if you set 95%.
What you have won't work on loads of things, especially margin: auto;
You don't ever need to set max and min for large images. Just set a % of height OR width (and other to auto). Set small images absolute px.

You'll almost never see rem in ebooks.

Note that ebooks are like print aspect of web pages, not the screen aspect. ebooks use HTML, but they are not web pages.

To make it even easier to write style rules that depend only on the default font size, CSS has since 2013 a new unit: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document. E.g., to give P and H1 elements the same left margin, compare this pre-2013 style sheet:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

with the new version:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

This is for screens of web pages, NOT ebooks. Don't use rem.

Also ebook users more commonly change the font size, overall margins, line spacing and even body font via the GUI than web browser users. Only a few platforms /apps allow scrolling like a web page, ebooks by default are paginated to the size of the screen.


Also to have conditional sizes you need javascript on web pages, an ebook doesn't have javascript. You want a lowest commomn denominator for the same epub2 to work converted to kepub, epub3, old mobi, dual mobi, azw3 and kfx.

[Quoth]

All our own ebooks are edited in odt on LO Writer. There is an extra Save As in docx which is added to Calibre.
Then the docx is converted to epub2. The docx then removed. All other formats are made from the epub2 after editing.
The ONLY edit is the CSS of the larger images! All else is 1:1 mapped from LO Writer styles. Small images don't have CSS edited as they have correct absolute px in the CSS from LO Writer.

I also have edited 1000s of 3rd party ebooks, some bought and most from PD sources.

Calibre Viewer is only used to check TOC makes sense and all links (internal or external) work. We only test in apps that respect CSS (lithum, Aldiko, Bluefire, PocketBook).
We don't test KFX (that's Amazon's issue) or kepub (Kobo's sales) because it will be OK if the uploaded epub gives good old mobi and azw3. We text on 3 kinds of Kindle and the Amazon Preview is now no use. If something new is tried we buy the ebook and download to DXG (old mobi), KK3 and PW3 (azw3).
If epub is OK in epub mode on Kobo, it's OK on everything (ADE on most), but we check 4.3″ 5″ 4.7″ 6″, 7″, 8″ & 10″ screens for images working OK.

We run "check book" (ladybird icon) and epub check (tick icon) in Calibre Editor.

[Quoth]

Calibre Viewer is using some sort of QT webkit browser, nothing like the renderers in most ebooks, so only use to check TOC makes sense and all links (internal or external) work.
It's fine for people that don't have phone, tablet or eink to read on, but it will not behave the same as real ereaders with exotic HTML or CSS. Some Android Apps might work similarly.

An iphone / iPad may only have HTML3 / old mobi rendering (kindle app) or a renderer based on whatever species of Safari is built in. It's a separate ecosystem, certainly ebooks bought from Apple books using epub2 source are not shown the same as epub loaded direct to Apple Books. The iOS Kindle doesn't render the same as Android Kindle, it's more like Old Mobi.
Apple automatically converts epub2 loaded to their store to be 100% Books compatible. Directly (sideloaded) epub on Books (formerly iBooks) needs extra code.

[RonOnThePond]

Quoth, thank you for that incredibly detailed response. The basic takeaway for me is that I may be an expert in many things, but I am a total novice at properly creating ebooks. This is really no surprise. Such is life.

Unfortunately, this book is about a year behind schedule. To be sure, it's a self-imposed schedule, but it's not arbitrary, so I need to get it done. If I make it look okay on my three devices, I'll have to throw caution to the wind and just go with it. Maybe I'll send it to my apple-centric daughter for a look on her iPhone and iPad.

I will read your several prior posts a number of times to digest and apply what I can.

One more question: do you ever sleep?

Ron

[RonOnThePond]

With your example for me (thank you), without setting a maximum width for a very large image, it will grow to 80% of however much room there may be. This is way too big. I need some way to stop it from growing so much, but you said "You don't ever need to set max and min for large images." Why not? What if I do indeed want to have a maximum width?

I realize my approach has been messy, but starting over at this late date when things do look generally fine would require the luxury of time, which I no longer have. So yes, it's bandaids and bubble gum, but that's unfortunately where I'm at.

[JSWolf]

Originally Posted by nqk

Ah, it is just a shorthand for 90% and max-width: 26rem. It works for me without issues.

Sent from my Pixel 7 using Tapatalk

rem is not a good idea to use. It doesn't work in enough cases. Just use em.

[RonOnThePond]

Well, I'm still stumped. I've given up on the need for a minimum width, as it is relatively unimportant. What I want to do is stated simply, but apparently not addressed easily. I want to set a jpg image to span 30% of the available width, but no more than a maximum of 400px wide. Or something similar.

I am continuing to try this and that, hoping to find the magic combination.

[theducks]

You appear to be going about it backwards
Center a div, set its margins, then
limit the img{
max-width: 400px;
}