View Single Post
Old 09-13-2009, 05:44 AM   #44
pdurrant
The Ghost Mouse
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 32,154
Karma: 88613766
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
Allowing images to resize to fit page width/height

By using XHTML and putting images in an svg wrapper, it's possible to get the images to resize to fill an entire page of the ebook reader, in proportion and centred. Here's the full xhtml file for my cover image.

The trick that made it work compared to my previous tries seems to be explicitly giving the picture width and height in the image object, to match the size of the viewBox. Previously I'd used 100% in there.


<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../styles/style001.css" type="text/css" />

<title></title>
</head>

<body>
<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 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>
</body>
</html>
pdurrant is offline   Reply With Quote