Quote:
Originally Posted by eggheadbooks1
I tried the max-height and max-width value; this distorted the images.
|
Did you try with
only max-height (for instance), no width, no max-width, just max-height.
With SVG, this works in my browser (Opera):
Code:
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
The numbers in "viewBox" and the image "width" and "height" must match, but they don't need to be the real pixel dimensions of the image, or even the same ratio.
The height="100%" does nothing in Opera, because there's no defined height for the containing block, but it might work in ebook readers.
With this, the image is never distorted, and it's always resized (up or down) to maximum possible size. To limit the maximum size, this works too:
Code:
<div style="max-width:600px; max-height:800px">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
Now the "max-width" and "max-height" in the div
are the image pixel dimensions. It also works (in Opera) if the style is put in the <svg> element instead of the <div>.