Okay, let me try again, because I'm obviously not describing things clearly.
Imagine an image that is 6 times wider than it is tall. So, height of 1, width of 6.
I set the height at 2em and the width at auto. That should mean that the implied width is 12em.
what i want is the following:
a) if the window is narrower than would accommodate a 2em height and proportional width (e.g. the WINDOW width is equivalent to 11em), the image is shrunk to fit the screen width-wise, maintaining a proportional height (i.e. resulting in an image that functionally has a height of 1.8333em and a width of 11em).
b) if the window is wider than the proportional width of the image at a height of 2em (e.g. 14em wide), it will honor the 2em height with proportionaly width (resulting in 1em of white space to the left and right of the image).
c) if the window matches the proportional width of the image at the defined 2em height, it would would look like scenario a, except the image would be exactly 2em (as defined) rather than shrinking to fit the window.
In NONE of the above cases would there be additional white space above and below the image.
In
your earlier post using svg, you wrote that if the height were changed to 15em, it would result in white space above and below the image if the window weren't wide enough to accommodate it proportionally. Obviously, that's not really ideal. Potentially generating random white spaces doesn't make sense from a reader's perspective. Also, I don't want the image disproportionately distorted. That ALSO doesn't make sense from a reader's perspective.