View Single Post
Old 08-16-2012, 04:38 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,901
Karma: 4269879
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by eggheadbooks1 View Post
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>.
Jellby is offline   Reply With Quote