View Single Post
Old 06-09-2025, 01:37 PM   #2
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,765
Karma: 169712580
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
For my purposes, I use an SVG wrapper for full page images which are mostly covers and some large images. For the cover and full page images, vh is set to 99 while the large images get a lower vh value. For small images, I just use a width: xx%; and height: auto;. On one occasion when working on a book which the author wanted to be read in portrait or landscape, I ended up with using media queries to set different values but that was a total PITA to set up. I attached a sample cover image style SVG wrapper. Normally, the styles are in the CSS stylesheet but I've embedded it here just to make it one block. The code is intended to look much the same on either ePub3 or ePub2 renderers.

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 online now   Reply With Quote