[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