Quote:
Originally Posted by serpyke
Hello. I have a small problem that I can't solve, even after fiddling with Calibre and searching help forums: when I send an ePub to a Kobo Libra Color as a Kepub, checking “maintain aspect ratio” and checking the option to use the reader's Kepub engine, the cover image looks perfect when the Kobo is idle (as a screensaver), but when I read the book, the first page also shows the cover image- and it is stretched to fill the entire screen. Could someone tell me how I can fix this, or if it is even possible to get it fixed? I would like the image to maintain its appearance there as well. Thank you very much.
|
For what it may be worth, the cover image not displayed directly when reading the book. The code used to display the cover page is often found in the first text (html, xhtml) file in the ePub. The following code is what I use to display the cover image in my edited ePubs. Note that the svg wrapper needs the image sizein both the viewbox and width/height items. This code should work for both ePub3 and ePub2 ebooks.
Code:
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body {text-align: center; padding:0pt; margin: 0pt; }
.cover {margin: 0; height: 99vh; max-width: 100%; overflow: hidden !important;}
.picWrapper {margin: 0; padding: 0; height: 100%;}
.pic {display: block; margin: auto; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
</style>
</head>
<body class="cover">
<div class="picWrapper">
<svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/cover.jpeg"/></svg>
</div>