Quote:
Originally Posted by Jellby
I don't want to be argumentative, but imagine a 400x350 image, and an 800x600 screen.
How would "height:100%" make it fit the screen? It would be shown at double size, and that'd make it 800x700 (matching the screen's height, 800, assuming that's portable in ePub) and it would be 100 pixels too wide. It's only if the device tries to be smart (and in doing so ignores the CSS) that it may fit
|
Hi Jellby;
Of course, in that case, the image won't fit the screen, because it can't if it must retain proportions. But even with a svg wrapper, that kind of images (400x350) also won't fit the screen (assuming a 800x600 size). However, in both cases (with or without a svg wrapper) the image will be fully showed and without distortion (in both, portrait and landscape mode). The image will have a showed size of 685.71x300 in portrait mode and a showed size of 400x350 in landscape mode. Do the try with the Obama image I attach:
It has a size of 400x350 and this is how it looks in Kindle Previewer:
Below you can check the respective .mobi
Regards
EDIT: When we use percentage to establish the height of an element, that element take the height of its container element. But if the height of this last element is not established, then the height is ignored and replaced by the value "auto". As we don't establish a height for the block element that contains the image, then the image takes the values height="auto" and width="auto" and for that reason the ereader device doesn't ignore the css rules; instead it's obeying rules. But one different thing is when we establish the width of an object in percentage; that case if different from the "height case" and the ereader must respect the width we establish.
I apologize for my english. It's not good and very probably what I wrote above has many grammar errors.