Quote:
Originally Posted by Jellby
Even that wouldn't work. What if a portrait picture is wider than the screen is? What if a landscape picture is higher than the screen is?
What you want, conceptually at least, is "max-height: 100vh; max-width: 100vw", or in SVG terms: width="100%" height="100%" preserveAspectRatio="xMidYMid meet"
|
Exactly - an svg wrapper!
I use those exclusively for any full page images. But then, my ereader of choice supports svg wrappers. If you use them for other than the cover page, as
Hitch noted, older kindles - or those using enhanced typesetting, aren't compatible. That takes a bit of a bite out of your potential customer base.
If you are OK with that, then you can try something like this:
Code:
<body style="margin:0; padding:0; text-align:center; background-color:black">
<div style="margin:0; padding:0">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100vh" width="100vw"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 1000 1600"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1000" height="1600" xlink:href="../Images/img_ChDv.png"/>
</svg>
</div>
</body>
You can set it as a clip if you use Sigil, then all you need to do is enter the images actual
width,
height, and the
path to the file.
OBTW - I don't like using inline styles on principle...but they are included here because it is set as a template for my "Add Cover" function in Sigil. You can certainly swap those out for a specific class="" in your css file. Also, the background color defaults to black, but you can set it to any color that complements the image. I usually use the eyedropper function in Photoshop to tell me the RGB value of the color I want from the image, and then use "background-color:rgb(0, 0, 0)". I'm sure there are other, more affordable, software options that have an eyedropper function.
Cheers,