Quote:
Originally Posted by azimuth
My initial goal: to get a cover image to function the same visually (for epub3) in a web browser, + same as in a desktop epub, + same as in an Android eReader epub -- all to function like an SVG, but using just JPG/PNG image and CSS so the bottom of the image would not spread off page.
|
Yes, I know that
But you still can use jpg/png images with a svg wrapper. For example, try using the following code that should work everywhere (with epub2 and epub3):
1) In your css stylesheet:
Code:
.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;
}
2) In your .xhtml file write the following:
Code:
<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 10 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="800" width="600" xlink:href="../Images/Your_Cover.jpg"/></svg>
</div>
</body>
Of course, the values of your viewport (600 and 800) can be different, according to the size of the cover image in px.
Quote:
Having gotten that, next...we made the suggested code changes to get the cover image sit on the left panel of a two-page spread (horizontal mode).
Code:
#container img {
display: block;
height: auto;
max-height: 100vh;
max-width: 100vw;
margin: auto;
border: 0;
position: static;
column-span: none;
column-fill: auto;
}
|
Sorry, I didn't explain myself very well. Yes, column-span and column-fill are ok but STILL position: absolute and left, right, top, bottom equal to 0 should be there. Something like:
Code:
#container img {
display: block;
height: auto;
max-height: 100vh;
max-width: 100vw;
margin: auto;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
column-span: none;
column-fill: auto;
}
Try also that code to see what happens.