Contents | Start | End | Previous: KB0048: How do I add a watermark to all pages in Epub or Kindle? | Next: KB0050: How do I fix oversized images, tables or boxes?
See also: Why are there blank pages before or after images on Kobo?
Some ebook readers, such as Nook, Aldiko and ADE, expand images and create an incorrect aspect ratio, if the images have their maximum width and/or height set, e.g. by Limit image size to viewer in your configuration, or per image in the image properties.
This happens in Nook, Aldiko and Adobe Digital Editions (ADE);
This does not happen in Bluefire, Chrome browser, Moon+ Reader, and Kobo.
The way to have images correctly sized while retaining maximum width and/or height, is to specify the width or height (but not both) in pixels or other units in the image properties. For example, if the image is 300x500, specify 300px in the Width field. This should give correct results on most readers including Kindle, if a specific absolute size is required. The key to avoiding squashed images on Kobo when setting a proportional size seems to be not to set both size and maximum size for the same element - set one or the other.
To avoid a cover image expanding incorrectly on Kobo, especially when viewed in landscape, you can paste the following HTML into the Custom HTML field for the cover (see Preferences/Cover). However, note that this won't expand an image that's smaller than the display size to fit a larger display, so you need to make sure that the cover image is reasonably large (but not so large as to make the Kobo fail to display it at all).
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Cover Page</title>
<style type="text/css">
@page { margin: 0; padding: 0; }
</style>
</head>
<body style="margin: 0; padding: 0; oeb-column-number: 1; ">
<div style="width: 98%; height: 98%; margin: 0; padding: 0; text-align: center;">
<img id="CoverImage" src="CoverDesign.jpg" style="max-height: 98%; max-width: 98%; padding: 0; margin: 0;" alt="Cover" />
</div>
</body>
</html>
Contents | Start | End | Previous: KB0048: How do I add a watermark to all pages in Epub or Kindle? | Next: KB0050: How do I fix oversized images, tables or boxes?