|
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!
|