Quote:
Originally Posted by MacEachaidh
OK, I confess, there's a lot about ePub coding I haven't got my head around. But I have a Kobo Touch and an Aura HD, and am trying to code covers that work on both devices.
The Touch's display is 600x800, the Aura HD 1080x1440 — so, same pixel ratio. I've been making the cover graphics 1080x1440 @ 265 ppi, the size of the Aura's screen. I'm using Jutoh to code the the ePub, and it creates the following code for the cover image:
So far, so good. Problem is, on both devices, the cover fills the screen vertically, but is compressed horizontally to leave maybe half an inch down each side. So what's happening? How do I get around this?
I found this code, which uses and SVG wrapper and seems to work, but I don't understand what makes the difference.
I'd be grateful for any observations or advice, please.
|
Yes, SVG can make the difference for you
Use the following code:
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/CoverDesign.jpg"/>
</svg>
</div>
Since 1080x1440 is multiple from 600x800 you won't have any troubles and the cover will fill both screen and without distortion.
Regards
Rubén
PS: Of course, you must keep the size of your cover in 1080x1440.