Image CSS not changing for iPad kindle from MOBI KindleGen

Question

I'm writing an ebook in HTML and converting to MOBI with Kindlegen. I want to make sure the images never take up the whole page. However some images are doing just that.

I've tried multiple CSS styles but nothing seems to change. I'm testing on Kindle Previewer, iPhone X, kindle paper white (older device) and iPad. All these devices seem to react to CSS differently and the iPad seems to completely ignore my image styles. No matter what I set the iPAD images don't change. How can I make sure the images are never too large? I want the image to be small enough so that text is also on the same page. Ideal never larger than about 30% of the screen.

I've tried setting a percentage

width: auto;
height: 30%;

and setting em

width: auto;
height: 20em;

I get an error from Kindlegen if I use max-height

.image {
  width: auto;
  height: 30%;
}

.centerImg {
  text-indent: 0;
  margin: 1em 0 0 0;
  padding: 0;
  text-align: center;
}

<!-- Page 29 -->
    <p class="centerImg">
      <img class="image" alt="lock" src="images/page29.jpg" />
    </p>
    <p class="collector">
      Text
    </p>
    <br />
    <p class="description">
      Text
    </p>
    <div class="pagebreak"></div>

What's the best way to do this?

Answer 1

CSS with ebooks on Amazon can be a bit daunting. I've even seen major bestsellers where the layout didn't work out as intended. Although I've never gotten an ebook to look exactly the same across all devices, I have been able to size my images satisfactorily. I use the free program Sigil for editing, then convert to .mobi with Calibre.

Because CSS can be so unreliable on ebooks, I sized the image in the HTML itself:

<div align="center"><img height="148" src="../Images/stars-300.jpg" width="200"/></div>
<br/>
  <h1 class="cinz" id="sigil_toc_id_21">-21-</h1>
<br/>
<h1 class="toocinz sigil_not_in_toc">Between Worlds</h1>

Below is an image of the above code on Kindle Paperwhite. On the iPad, the image is a bit smaller, and some of the spacing is different, but it looks close enough. Another trick I've used to 'force' the ebooks to use your styling, is to use two CSS stylesheets. The first one simply refers to the second, "real" one. This can get around some of the default styles that override custom styles. I'm not sure how well it's worked, but it hasn't hurt:

Style0001.css has only this line: @import url(../Styles/Style0002.css); Style0002.css is where all my actual styling is. All my book pages link to the first stylesheet:

<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>.