View Single Post
Old 05-15-2014, 03:41 AM   #3
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
To make the image as big as possible (which will depend on the page margins the user has set), one way is to add height:100% or width:100% to the img style (depending in whether the image is tall or wide):
Code:
<div style="margin:0; padding:0; text-align:center;">
 <img alt="Cover" src="images/cover.jpg" style="height:100%"/>
</div>
another is to use an svg block (e.g. for a 600x900 image):
Code:
<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 900" preserveAspectRatio="xMidYMid meet">
 <image width="600" height="900" xlink:href="images/cover.jpg" />
</svg>
Beware that Calibre will reduce the size of the images inside the epub when it transfers the book to the device unless you have the output profile set to "Tablet". This won't affect the final screen size if you use the methods above, but it will reduce the quality of the image significantly. A common mistake is to set the output profile to "Kobo Reader" which refers to the old low-resolution devices, use "Tablet" instead.
GeoffR is offline   Reply With Quote