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:
Quote:
<body style="margin: 0; padding: 0; oeb-column-number: 1; background-color: rgb(0,0,0);">
<div style="width: 100%; height: 100%; margin: 0; padding: 0; text-align: center;"><img alt="Cover" id="CoverImage" src="../Images/CoverDesign.jpg" style="height: 100%; max-width: 100%; max-height: 100%; padding: 0; margin: 0;" /></div>
</body>
|
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.