Answers.Body: <p>unfortunately you can't make <code>width:100%;</code> in mobi files. Amazon just strip that away. You can try to set <code>min-width:100%;</code> instead but this is little different in behave so test are needed. More about which CSS kindle respect you can read in <a href="http://www.amazon.com/gp/feature.html?docId=1000729901" rel="nofollow noreferrer">this documentation</a>. </p>
  
  <p>2017/06/27
  Changes in KF8 format allow now using width css property</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-17T00:30:20.990Z
Answers.Text: 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.
Answers.UserDisplayName: flazzo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-17T09:17:37.050Z
Answers.Text: 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](http://alistapart.com/article/progressiveenhancementwithcss)
Answers.UserDisplayName: Glorifind
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-18T16:30:19.540Z
Answers.Text: 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.
Answers.UserDisplayName: flazzo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-23T23:31:26.863Z
Answers.Text: This is not correct. Kindle mobi supports the width property, but it does NOT support the max-width property. 100% sure of this.
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-03-23T23:56:41.313Z
Answers.Text: To elaborate, this applies also to all e-ink devices which support KF8. That basically means K4 devices from 2010 and later.
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-06-02T12:33:04.923Z
Answers.Text: @idiotprogrammer the Documentation says quite opposite your statment...
Answers.UserDisplayName: Glorifind
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T07:15:14.063Z
Answers.LastActivityDate: 2017-06-27T09:12:27.573Z
Answers.LastEditDate: 2017-06-27T09:12:27.573Z
Answers.UserDisplayName: Glorifind
Answers.Body: <p>This is the correct answer (trust me on this -- I took several days to figure it out). </p>
  
  <p>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. </p>
  
  <p>Kindle definitely supports the css <strong>width</strong> property and <strong>min-width</strong> on KF8 devices and apps. But it does NOT support the max-width property. You can see this on the <strong>16.2  CSS Support Table</strong>  page 81 inside the latest <strong>Amazon Kindle Publishing Guidelines (Version 2015.4)</strong> (And <a href="https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf" rel="nofollow noreferrer">Version 2019.2</a>.)</p>
  
  <p>Here's what I do: </p>
  
  <pre><code>div.image-replace-title  {
    width: 95%;
    margin-left:  auto;
    margin-right:  auto;
  }
  
  div.image-replace-title img {
    width: 100%;
    display: inline;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>E-ink devices from 2010 support KF8, so they should have the same display. But <a href="https://www.amazon.com/gp/feature.html?docId=1000765211" rel="nofollow noreferrer">kindlegen</a> will shrink the image so it's optimized for the specific device. </p>
  
  <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2016-03-23T23:43:58.993Z
Answers.LastActivityDate: 2020-05-06T20:26:19.193Z
Answers.LastEditDate: 2020-05-06T20:26:19.193Z
Answers.UserDisplayName: idiotprogrammer
Answers.Body: <p>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.</p>
  
  <p>ebook-convert ebook.mobi ebook_files</p>
  
  <p>I see this format option doesn't seem to be available from the GUI. But you could convert your mobi <em>back</em> to epub (which is a simple zip file), change the extension to zip, unzip it, and see what has survived of your css etc.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-16T03:35:34.450Z
Answers.Text: Oh, that's actually a good idea. I will try this and see what I find.
Answers.UserDisplayName: flazzo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-15T23:34:47.553Z
Answers.LastActivityDate: 2015-02-15T23:34:47.553Z
Answers.UserDisplayName: Hugh
Answers.Body: <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-15T19:45:06.550Z
Answers.Text: 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.
Answers.UserDisplayName: flazzo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-15T19:45:30.760Z
Answers.Text: I mean, I can READ the mobi with no problem, but editing it is a bit more unclear.
Answers.UserDisplayName: flazzo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-29T03:13:48.963Z
Answers.Text: @anthony on windows you can change .epub to .zip by literally changing the extension. then you can unzip and see the contents.
Answers.UserDisplayName: Math Misery
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-02-15T02:04:54.907Z
Answers.LastActivityDate: 2015-02-15T02:04:54.907Z
Answers.UserDisplayName: Hugh
Body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img alt="Image" src="index-11_1.png" width="100%"/&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div.span img {width: 100%;}
  
  &lt;div class="span"&gt;&lt;img alt="Image" src="index-11_1.png" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Side by side for comparison <a href="https://i.sstatic.net/w4RMd.jpg" rel="noreferrer">https://i.sstatic.net/w4RMd.jpg</a></p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-02-17T19:11:54.830Z
Comments.Text: `width:100%; height:auto;` does the trick for me. For your css, have a class directly on the image element rather than wrapping.
Comments.UserDisplayName: Aibrean
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-02-17T21:33:41.100Z
Comments.Text: 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. http://imgur.com/SRkmZ42
Comments.UserDisplayName: flazzo
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-02-18T17:52:28.807Z
Comments.Text: I would personally use a class other than span.
Comments.UserDisplayName: Aibrean
Tags: <kindle><publishing><image>
Title: Stretching an image to fit the screen
UserDisplayName: flazzo
ThreadText: # Stretching an image to fit the screen
  
  (Asked by: username_0 on 2015-02-14)
  
  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.sstatic.net/w4RMd.jpg>
  
  **Tags:** kindle, publishing, image
  
  > **Comments:**
  > **username_1**: `width:100%; height:auto;` does the trick for me. For your css, have a class directly on the image element rather than wrapping.  
  > **username_0**: 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. http://imgur.com/SRkmZ42  
  > **username_1**: I would personally use a class other than span.  
  
  ---
  
  ## 4 answers
  
  ### Answer by username_2 on 2015-02-16. Score: 4 | Accepted answer
  
  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](http://www.amazon.com/gp/feature.html?docId=1000729901).
  
  2017/06/27
  Changes in KF8 format allow now using width css property
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_2**: 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](http://alistapart.com/article/progressiveenhancementwithcss)  
  > **username_0**: 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.  
  > **username_3**: This is not correct. Kindle mobi supports the width property, but it does NOT support the max-width property. 100% sure of this.  
  > **username_3**: To elaborate, this applies also to all e-ink devices which support KF8. That basically means K4 devices from 2010 and later.  
  > **username_2**: @username_3 the Documentation says quite opposite your statment...  
  
  ---
  
  ### Answer by username_3 on 2016-03-23. Score: 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](https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf).)
  
  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](https://www.amazon.com/gp/feature.html?docId=1000765211) 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 by username_4 on 2015-02-15. Score: 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.
  
  > **Comments:**
  > **username_0**: Oh, that's actually a good idea. I will try this and see what I find.  
  
  ---
  
  ### Answer by username_4 on 2015-02-15. Score: -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.
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_0**: I mean, I can READ the mobi with no problem, but editing it is a bit more unclear.  
  > **username_5**: @anthony on windows you can change .epub to .zip by literally changing the extension. then you can unzip and see the contents.  
  
  ---
  
  