Quote:
Originally Posted by etrnlflame
Thank you so much again! I know code less than I'd like and can't seem to figure out how to apply your code to the image on this page:
One last bit of help would be very appreciated  |
Open the stylesheet.css or whatever it's name happens to be and copy/paste the four classes Geoff supplied into it.
Convert your single line showing the map:
Code:
<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="calibre6"/></p>
to:
Code:
<div class="full-page-image">
<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="full-page-stretch"/></p>
</div>
Replace the full-page-stretch with whichever of the three classes works better for you.
Personally, I prefer to use an svg wrapper for full screen images.
Code:
<style type="text/css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body class="nomargin">
<div class="svg_wrapper">
<svg 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.jpg"/></svg>
</div>
In the stylesheet:
Code:
.nomargin {
display : block;
text-align : center;
margin : 0 0 0 0;
}
.svg_wrapper {
display : block;
margin : 0 0 0 0;
padding : 0 0 0 0;
text-align : center;
}
I prefer to have images in an Images directory, text in a Text directory, etc. hence the paths shown in my sample.
Change the height/width in both places to match your image and it will be fitted to the full screen. And yes, the multiple margin and padding settings are redundant but they work around some oddities in epubs I've edited.