MobileRead Forums - View Single Post - Image resizing issues while using max-height/max-width

Detroa · 08-07-2020, 11:32 AM

Hello,

First of all, sorry if I'm not using the correct terms or if my explanation is a little fuzzy, I'm very new to this and English isn't my first language.

I'm working on a ePub containing a lot of images which is a first for me. Some images are extra wide, some are extra long.
My goal is to use the same set of parameters on all images, no matter their dimensions or orientations, that would display each of them at the biggest possible scale without exceeding any ereader screen size and while keeping the correct aspect ratio.

My current code is the following:

Code:

<div style="width: 100%; max-height: 100%;">
    <img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" />
</div>

I was thinking that:
1. The container div would take 100% of the page width (that part seems to work);
2. The image, using "display: block" would try to take up 100% of its container width but would stop scaling it as soon as the height would reach 100% (that part doesn't seem to work).

If I only have one image on the screen, it scales correctly but as soon as I have other elements displayed, it looks like they're squeezing the image and its container div.

Example: in the following picture, I'd like for the images to be scaled according to the available width of the page/div and push the other elements (tables, texts) down instead of being squeezed by them (I put a 1px border on one of the image container div to confirm it was taking up 100% of the page width).
https://i.stack.imgur.com/66cb6.jpg

Does anyone know how this could be fixed?

Thank you a lot for reading.

08-07-2020, 11:32 AM	#1
Detroa Junior Member Posts: 5 Karma: 10 Join Date: Aug 2020 Device: Kobo	Image resizing issues while using max-height/max-width Hello, First of all, sorry if I'm not using the correct terms or if my explanation is a little fuzzy, I'm very new to this and English isn't my first language. I'm working on a ePub containing a lot of images which is a first for me. Some images are extra wide, some are extra long. My goal is to use the same set of parameters on all images, no matter their dimensions or orientations, that would display each of them at the biggest possible scale without exceeding any ereader screen size and while keeping the correct aspect ratio. My current code is the following: Code: <div style="width: 100%; max-height: 100%;"> <img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" /> </div> I was thinking that: 1. The container div would take 100% of the page width (that part seems to work); 2. The image, using "display: block" would try to take up 100% of its container width but would stop scaling it as soon as the height would reach 100% (that part doesn't seem to work). If I only have one image on the screen, it scales correctly but as soon as I have other elements displayed, it looks like they're squeezing the image and its container div. Example: in the following picture, I'd like for the images to be scaled according to the available width of the page/div and push the other elements (tables, texts) down instead of being squeezed by them (I put a 1px border on one of the image container div to confirm it was taking up 100% of the page width). https://i.stack.imgur.com/66cb6.jpg Does anyone know how this could be fixed? Thank you a lot for reading. Last edited by Detroa; 08-07-2020 at 11:35 AM.