Изображение CSS не меняется для iPad разжечь от MOBI KindleGen

Question

Я пишу книгу на HTML и конвертирую в MOBI с Kindlegen. Я хочу убедиться, что изображения никогда не занимают всю страницу. Однако некоторые изображения делают именно это.

Я пробовал несколько стилей CSS, но ничего не изменилось. Я тестирую на Kindle Previewer, iPhone X, kindle paper white (старое устройство) и iPad. Все эти устройства, похоже, по-разному реагируют на CSS, и iPad, похоже, полностью игнорирует мои стили изображений. Независимо от того, что я установил, изображения iPAD не меняются. Как я могу убедиться, что изображения никогда не бывают слишком большими? Я хочу, чтобы изображение было достаточно маленьким, чтобы текст также находился на той же странице. Идеально никогда не должен превышать 30% экрана.

Я пытался установить процент

width: auto;
height: 30%;

и настройка em

width: auto;
height: 20em;

Я получаю ошибку от Kindlegen, если я использую 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>

Какой лучший способ сделать это?

Answer 1

CSS с электронными книгами на Amazon может быть немного пугающим. Я даже видел крупных бестселлеров, где макет не сработал, как задумано. Хотя я никогда не получал электронную книгу, которая бы выглядела одинаково на всех устройствах, я смог удовлетворительно определить размер своих изображений. Я использую бесплатную программу Sigil для редактирования, а затем конвертирую в .mobi с калибром.

Поскольку CSS может быть настолько ненадежным в электронных книгах, я оценил изображение в самом HTML:

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

Ниже приведено изображение вышеуказанного кода на Kindle Paperwhite. На iPad изображение немного меньше, и некоторые интервалы отличаются, но выглядит достаточно близко. Другой трюк, который я использовал, чтобы "заставить" книги использовать ваш стиль, - это использовать две таблицы стилей CSS. Первый просто относится ко второму, "настоящему". Это может обойти некоторые стили по умолчанию, которые переопределяют пользовательские стили. Я не уверен, насколько хорошо это сработало, но это не повредило:

Style0001.css имеет только эту строку: @import url(../Styles/Style0002.css); Style002.css - вот где все мои настоящие стили. Все страницы моей книги ссылаются на первую таблицу стилей:

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