Quote:
Originally Posted by ElMiko
For example, I've read that for a full-page, portrait mode image
Code:
height: 100%;
width: auto;
|
The issue is more complex than you think. First, you should keep in mind that this CSS code works differently depending on whether the e-reader is based on RMSDK (ADE 2.x/3.x) or Webkit/Readium.
If the e-reader is based on Webkit/Readium, "height: 100%" won't work. Or to make it work, more declarations than just "height: 100%" are needed. With this last property, we are telling the e-reader that the image will occupy 100% of the block that contains it. And here the problem arises, because if the containing block is a <div> and this block itself has a "height: 100%" value, for this height to be honored, we have to define that the <body> also has "height: 100%." And this causes more problems than it solves, unless the image has no text either before or after it; this is the typical case of a cover. If it's a cover image, for everything to work under Webkit/Readium you need the following code:
Code:
html, body, div.picture {
height: 100%;
}
img.cover {
height: 100%;
width: auto;
}
And in the .xhtml sheet:
Code:
<div class="picture">
<img class="cover" alt="" src="../Images/your_image.jpg"/>
</div>
Now the above code will force the image to have a height of 100%, BUT ITS WIDTH CAN BE GREATER THAN 100%. If we change "width: auto" to "width: 100%" in the image's CSS code to avoid this, the image will fill the entire screen but will most likely be distorted. To avoid this, we use the <svg> tag instead of the <img> tag.
The code is greatly simplified if you're working in epub3 since instead of "%" you can use "vh" as the height unit and of that, is not needed to define a height for <html> and <body>. On the other hand, if the e-reader is based on RMSDK, the considerations are the same except that the <html> and <body> tags also don't need to have a height of 100%, but in this case, "vh" can't be used.
There are many more considerations if the image you're working with is going to be included in the middle of a text. In that case, none of the above applies much.
All that said, if what you need is code to handle a cover image, then use the following, which works everywhere (RMSDK, Webkit/Readium, epub2, epub3):
Code:
<head>
<title>Cover</title>
<style type="text/css">
.cover {
margin: 0;
height: 99vh;
max-width: 100%;
overflow: hidden !important;
}
.picWrapper {
margin: 0;
padding: 0;
height: 100%; /* this is for epub2 and ADE */
}
@supports(display: flex) { /* but if the ereader supports epub3 */
.picWrapper {
height: auto; /*then height is "auto" instead of "100%"
}
}
.pic { /* this reserves an space for the svg wrapper equal to the full screen, where the image is going to be inserted */
display: block;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
</style>
</head>
<body class="cover">
<h1 style="display:none" title="Cover" class="sigil_not_in_toc"></h1>
<div class="picWrapper">
<svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 10 600 900" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="900" width="600" xlink:href="../Images/cover.jpg"/>
</svg>
</div>
</body>
Of course, instead of height="900" width="600" you'll employ the height and width in pixels of your image (the same in viewBox). The div.picWrapper under epub2/ADE will have a height of 100% and a width given by the svg wrapper. But under epub3, it will have a height of 0 (
) and a max-width of 100%; under epub3 the height and width is handled by the parameters of the svg wrapper (its maximun height will be able untill 99vh). The above code is complex because contains both, code for epub2 and epub3 and the image will be centered in the screen with the maximum width and height that does not allow distortion.