Judging from both MR searches and Google, this question is ripe for a flame war—this is NOT my intent.
I have not been able to discern what the various properties do in practice, both because they appear to behave differently in different apps and because they are described as doing different things by different users.
For example, I've read that for a full-page, portrait mode image
Code:
height: 100%;
width: auto;
But in Sigil (and PageEdit) this merely shows the image at 100% of it's actual size, not fitted to the window.
In callibre, it seems to work until the reading screen is adjusted to 2-page mode, and then it gets horizontally smooshed.
Alternately, I've seen the following recommendation...
Code:
height: 100%;
width: 100%;
Preserves aspect ratio fine in Sigil/PageEdit, but does not limit the image vertically (i.e. widening the window will enlarge the image proportionally, but extend the image beyond th bottom of the window). Meanwhile, in Calibre, it loses its aspect ratio, getting horizontally stretched (but not smooshed).
Another recommendation is...
Code:
height: 100%;
max-width: 100%;
This works in in Sigil/PageEdit, except not being vertically limited when the window is stretched, and it gets horizontally smooshed in Calibre (but not stretched).
Code:
max-height: 100%;
width: 100%;
Again, in Sigil/PageEdit maintains aspect ratio but doesn't vertically limit the image to the window size. In Calibre it stretches horizontally (losing aspect ratio), but WILL resize proportionately when the window is shrunk horizontally.
Also tried max-height/width variants to in include "auto", which again just blows up the image to full resolution in Sigil/PageEdit.
Can someone please explain what I'm doing wrong?
P.S. really unfamiliar with svg wrappers, so not sure I can use those effectively... but shouldn't this be doable with plain old css??