Quote:
Originally Posted by GeoffR
That could be caused by a top-margin or -padding style on the img or on body, if that is the case then you need to either remove the margin/padding, or reduce the image height to allow for it. But you can't do everything by tweaking the Calibre conversion parameters without messing up other things in the book, so you will likely need to edit the ePub.
Here is a simple example of styles for a full-page image using <img>:
stylesheet.css:
Code:
body.full-page-image { margin:0; padding:0; }
div.full-page-image { margin:0; padding:0; text-align:center; }
img.full-page-tall { margin:0; padding:0; height:100%; width:auto; max-width:100%; }
img.full-page-wide { margin:0; padding:0; height:auto; max-height:100%; width:100%; }
img.full-page-stretch { margin:0; padding:0; height:100%; width:100%; }
map.html
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body class="full-page-image">
<div class="full-page-image">
<img alt="Map" src="map.jpg" class="full-page-stretch"/>
</div>
</body>
</html>
|
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:
Quote:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Elemental Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<link href="page_styles.css" rel="stylesheet" type="text/css"/>
</head>
<body class="calibre">
<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="calibre6"/></p>
</body></html>
|
One last bit of help would be very appreciated
