View Single Post
Old 06-08-2025, 06:59 PM   #174
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 46,445
Karma: 169098492
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Quote:
Originally Posted by serpyke View Post
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>
DNSB is offline   Reply With Quote