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 https://i.stack.imgur.com/w4RMd.jpg

3
  • 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, 2015 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
    – flazzo
    Feb 17, 2015 at 21:33
  • I would personally use a class other than span.
    – Aibrean
    Feb 18, 2015 at 17:52

4 Answers 4

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

6
  • 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.
    – flazzo
    Feb 17, 2015 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, 2015 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.
    – flazzo
    Feb 18, 2015 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. Mar 23, 2016 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. Mar 23, 2016 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.

1
  • Oh, that's actually a good idea. I will try this and see what I find.
    – flazzo
    Feb 16, 2015 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) (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.

-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.

3
  • 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.
    – flazzo
    Feb 15, 2015 at 19:45
  • I mean, I can READ the mobi with no problem, but editing it is a bit more unclear.
    – flazzo
    Feb 15, 2015 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. Jun 29, 2017 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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