Stretching an image to fit the screen

Question

I am converting a book for use on a Kindle 7. I want certain images to display as large as possible while keeping the original aspect ratio. I can get the images to display properly in EPUB format, but when I convert to MOBI, the image shrinks back to its original size.

HTML

<img alt="Image" src="index-11_1.png" width="100%"/>

CSS

div.span img {width: 100%;}

<div class="span"><img alt="Image" src="index-11_1.png" /></div>

Both of these methods seem to work, but they do not survive the conversion to MOBI. Isn't there any way to force images to span the width of the screen?

Side by side for comparison http://imgur.com/aYKvxGc

Answer 1

unfortunately you can't make width:100%; in mobi files. Amazon just strip that away. You can try to set min-width:100%; instead but this is little different in behave so test are needed. More about which CSS kindle respect you can read in this documentation.

2017/06/27 Changes in KF8 format allow now using width css property

Answer 2

I am on linux, so I use the calibre convert-ebook command-line tool to convert to open-ebook format which is just a directory with the files in.

ebook-convert ebook.mobi ebook_files

I see this format option doesn't seem to be available from the GUI. But you could convert your mobi back to epub (which is a simple zip file), change the extension to zip, unzip it, and see what has survived of your css etc.

Answer 3

This is the correct answer (trust me on this -- I took several days to figure it out).

Kindle's formatting guide specifies that you should include as high a resolution file as you possibly can. Then, Kindle shrinks the image to a size appropriate for that platform.

Kindle definitely supports the css width property and min-width on KF8 devices and apps. But it does NOT support the max-width property. You can see this on the 16.2 CSS Support Table page 81 inside the latest Amazon Kindle Publishing Guidelines (Version 2015.4) (And Version 2019.2.)

Here's what I do:

div.image-replace-title  {
  width: 95%;
  margin-left:  auto;
  margin-right:  auto;
}

div.image-replace-title img {
  width: 100%;
  display: inline;
}

I faced a situation where some of my images were low-quality and I needed to make them full width on Kindle. With other platforms I could do it by using the css max-width property, but for the kindles, the images themselves needed to be blown up. For that reason, I used my graphics program to convert my 500px wide image to 2000 px. Yes, you risk pixilation for low quality images, but remember the widest ebook reading device is probably 10 inches. Even mediocre images still look decent at 2000 px on a 10 inch device. But the lesson learned is to use as high resolution images as possible, and let kindle's distribution program shrink the images as needed.

E-ink devices from 2010 support KF8, so they should have the same display. But kindlegen will shrink the image so it's optimized for the specific device.

For example, I have an image-rich epub file which is 7.5 mb. When you use kindlegen, the total image is 15-20 mb. But when Amazon downloads the file to your device, it was less than 2 mb.

Answer 4

I can't answer your question directly, because I don't know. But you can break open your mobi file with Calibre and see what has become of your original css. Also, you can then view the files in a browser to determine whether it is the conversion or the reader that is at fault.