6

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

  • width:100%; height:auto; does the trick for me. For your css, have a class directly on the image element rather than wrapping. – Aibrean Feb 17 '15 at 19:11
  • Hm. Doesn't seem to work. I've changed it to "img.span {width:100%;height:auto;}" and the tag to "<img class="span" alt="Image" src="index-10_1.png"/>" This is the result. imgur.com/SRkmZ42 – anthony Feb 17 '15 at 21:33
  • I would personally use a class other than span. – Aibrean Feb 18 '15 at 17:52
4

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

  • Well, that's disappointing to learn. This makes cross-device compatibility a bit of a pain. But wow! That is a very helpful table. I'll have to bookmark that. – anthony Feb 17 '15 at 0:30
  • It is not so painful as might be seemed at first. For ePubs you can just use width:100%; because kindleGen will strip it over. Also CSS like width:100%;min-width:100%; is almost similar. It is very good to know how to make your CSS progressive enhancement – Glorifind Feb 17 '15 at 9:17
  • Well, that's unfortunate that Amazon decided to make the Kindle work like this, but thanks for letting me know to stop wasting my time. – anthony Feb 18 '15 at 16:30
  • This is not correct. Kindle mobi supports the width property, but it does NOT support the max-width property. 100% sure of this. – idiotprogrammer Mar 23 '16 at 23:31
  • To elaborate, this applies also to all e-ink devices which support KF8. That basically means K4 devices from 2010 and later. – idiotprogrammer Mar 23 '16 at 23:56
1

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.

  • Oh, that's actually a good idea. I will try this and see what I find. – anthony Feb 16 '15 at 3:35
1

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)

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.

-1

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.

  • Really. That would be interesting to look at, but how do I open the mobi with Calibre? The only file I can seem to access is the epub. – anthony Feb 15 '15 at 19:45
  • I mean, I can READ the mobi with no problem, but editing it is a bit more unclear. – anthony Feb 15 '15 at 19:45
  • @anthony on windows you can change .epub to .zip by literally changing the extension. then you can unzip and see the contents. – Math Misery Jun 29 '17 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.