MobileRead Forums - View Single Post - XHTML img shrinked in tables only on ereader

il_mix · 09-28-2020, 10:37 AM

Ok, maybe I should have clarified beforehand why I used "height" instead of "width"...
When I set

Code:

width: 100%;

(with or without !important)
I get small images even in browser.
Setting

Code:

height: 100%;

I see original sized images in browser. That's why I opted for height in the EPUB, too.

Anyway, I've tested these options, with various results (none is ok);

Code:

width: 100%;

Images are shrinked. Same adding !important

Code:

height: 100%;

Images have original height, but are shrinked in width. Same adding !important

Code:

height: 100%;
width: 100%;

Images have original height, but are shrinked in width. Same adding !important

Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images.

NOTE: in my former example I stated that the images are shrinked (in both width and height) when setting "height" attribute in CSS. I've noticed a typo in my CSS

Code:

height: 100%! important;

instead of

Code:

height: 100% !important;

That's probably why I had a different result with respect to this message recap; the CSS was probably ignored due to the error.

09-28-2020, 10:37 AM	#5
il_mix Enthusiast Posts: 39 Karma: 20178 Join Date: Jun 2013 Device: Kobo Touch	Ok, maybe I should have clarified beforehand why I used "height" instead of "width"... When I set Code: width: 100%; (with or without !important) I get small images even in browser. Setting Code: height: 100%; I see original sized images in browser. That's why I opted for height in the EPUB, too. Anyway, I've tested these options, with various results (none is ok); Code: width: 100%; Images are shrinked. Same adding !important Code: height: 100%; Images have original height, but are shrinked in width. Same adding !important Code: height: 100%; width: 100%; Images have original height, but are shrinked in width. Same adding !important Regarding @RbnJrg hint, I prefer a more generic approach. I can have tables, with the same format as mytable, but have just text in the first column. So, I don't want to set a specific width for the first column. I want it to stretch given the image width (if any). This way I can avoid class-ification of the tds that contain images. NOTE: in my former example I stated that the images are shrinked (in both width and height) when setting "height" attribute in CSS. I've noticed a typo in my CSS Code: height: 100%! important; instead of Code: height: 100% !important; That's probably why I had a different result with respect to this message recap; the CSS was probably ignored due to the error.