View Single Post
Old 12-28-2018, 09:55 AM   #5
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
Quote:
Originally Posted by etrnlflame View Post
Thanks so much for the reply! It's my first self-published eBook and I'd like to get everything right.

I put the style code into Look at Feel > Styling:

img {max-height:100%; max-width:100%;}

I also put it into tablet export (so much nicer, thanks for that tip).

However the image is still going off the page vertically. It seems to fit horizontally but not vertically now. It it maybe not possible to win both?
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>
GeoffR is offline   Reply With Quote