View Single Post
Old 03-03-2012, 04:45 AM   #2
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: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Use SVG to properly scale the image to the screen size, keeping the aspect ratio:

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>
While it's not strictly necessary, it's easier to maintain if the dimensions in the "viewBox", "width" and "height" all match the actual image pixel dimensions.

If you don't want the image being scaled up beyond a certain size, you can use max-width or max-height.

Or you could directly code the entire image in SVG, that way it can be scaled to any size, without losing quality.
Jellby is online now   Reply With Quote