Answers.Body: <p>Here is the css I use for my kindle images: </p>
  
  <pre><code>div.image-container  {
  width: 95%;
  margin-left:  auto;
   margin-right:  auto;
    }
  
  div.image-container img {
   width: 100%;
   display: inline;
   }
  </code></pre>
  
  <p>The goal I wanted here was to have an image cover 95% of the screen, with the image in the center. You could change the 95% to 25% if that is what you want. I do not think the height property has any function in your code. </p>
  
  <p>The idea behind responsive web design (and responsive ebook design)  is that the images will adapt to the different screen sizes.  You can use css media queries to change the css for your images and div depending on screen size. (I describe it here: <a href="https://kdp.amazon.com/community/thread.jspa?messageID=1005910" rel="nofollow noreferrer">https://kdp.amazon.com/community/thread.jspa?messageID=1005910</a> ) </p>
  
  <p>Kindle definitely supports the css width property and min-width on KF8 devices and apps. But it does NOT support the max-width property. Hope this helps. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-14T21:38:21.597Z
Answers.Text: If I were to guess, it would be that the error message is resulting from the low quality of your images. All images in an ebook should be high quality -- with a minimum width of 800 pixels. The css code above will guarantee that the image width on Kindle will still be the percentage you specify.
Answers.UserDisplayName: idiotprogrammer
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-14T21:03:06.600Z
Answers.LastActivityDate: 2017-06-14T21:03:06.600Z
Answers.UserDisplayName: idiotprogrammer
Body: <ol>
  <li>I have Indesing book for printing.</li>
  <li>I optimized all styles for epub conversion.</li>
  <li>I exported my book to epub from Indesing.</li>
  <li>I unzipped my epub and work on its HTML code. Then I zip it again.</li>
  <li>I need to convert .epub to .mobi, but only in .mobi version the images are distorted. Why?</li>
  </ol>
  <p>I tested from .epub to .azw, azw to mobi and .epup to mobi. In all cases, .epub looks good, but .azw and .mobi distort images. (I use Calibre for conversions.)</p>
  <p>In CSS styles I have:</p>
  <pre><code>.image {
      height:25%;
      width:25%;
  }
  </code></pre>
  <p>My client needs to upload her .epub to her ebook distributor, she uploaded the .epub, and the distributor converted it to .mobi, and it's the same problem with images. They say that I have to fix the issue; but I don't know what it is.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-14T20:53:16.323Z
Comments.Text: What do you mean it is distorted? What is your goal for this image?
Comments.UserDisplayName: idiotprogrammer
Tags: <epub><mobi><image>
Title: How to avoid image distortion when convert my .epub to .mobi
UserDisplayName: danheca
ThreadText: # How to avoid image distortion when convert my .epub to .mobi
  
  (Asked by: username_0 on 2017-06-14)
  
  1. I have Indesing book for printing.
  2. I optimized all styles for epub conversion.
  3. I exported my book to epub from Indesing.
  4. I unzipped my epub and work on its HTML code. Then I zip it again.
  5. I need to convert .epub to .mobi, but only in .mobi version the images are distorted. Why?
  
  I tested from .epub to .azw, azw to mobi and .epup to mobi. In all cases, .epub looks good, but .azw and .mobi distort images. (I use Calibre for conversions.)
  
  In CSS styles I have:
  
  ```
  .image {
      height:25%;
      width:25%;
  }
  
  ```
  
  My client needs to upload her .epub to her ebook distributor, she uploaded the .epub, and the distributor converted it to .mobi, and it's the same problem with images. They say that I have to fix the issue; but I don't know what it is.
  
  **Tags:** epub, mobi, image
  
  > **Comments:**
  > **username_1**: What do you mean it is distorted? What is your goal for this image?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-06-14. Score: 2
  
  Here is the css I use for my kindle images:
  
  ```
  div.image-container  {
  width: 95%;
  margin-left:  auto;
   margin-right:  auto;
    }
  
  div.image-container img {
   width: 100%;
   display: inline;
   }
  
  ```
  
  The goal I wanted here was to have an image cover 95% of the screen, with the image in the center. You could change the 95% to 25% if that is what you want. I do not think the height property has any function in your code.
  
  The idea behind responsive web design (and responsive ebook design) is that the images will adapt to the different screen sizes. You can use css media queries to change the css for your images and div depending on screen size. (I describe it here: <https://kdp.amazon.com/community/thread.jspa?messageID=1005910> )
  
  Kindle definitely supports the css width property and min-width on KF8 devices and apps. But it does NOT support the max-width property. Hope this helps.
  
  > **Comments:**
  > **username_1**: If I were to guess, it would be that the error message is resulting from the low quality of your images. All images in an ebook should be high quality -- with a minimum width of 800 pixels. The css code above will guarantee that the image width on Kindle will still be the percentage you specify.  
  
  ---
  
  