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

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

1 голос
/ 02 июня 2019

Я пишу книгу на 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>

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

1 Ответ

0 голосов
/ 02 июня 2019

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

Поскольку 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); Style0002.css isгде все мои настоящие стилиВсе страницы моей книги ссылаются на первую таблицу стилей:

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

enter image description here

...