来自MOBI KindleGen的iPad kindle的图像CSS不变

Question

我正在用HTML写一本电子书，然后用Kindlegen转换成MOBI。我想确保图片不会占据整个页面。然而，一些图像就是这样做的。

我尝试了多种CSS样式，但似乎什么都没有改变。我正在测试Kindle预览器、iPhone X、kindle paper白色(旧设备)和iPad。所有这些设备似乎对CSS的反应不同，iPad似乎完全忽略了我的图像样式。无论我设置什么，iPAD图像都不会改变。我如何才能确保图像不会太大？我希望图像足够小，以便文本也在同一页上。理想情况下，屏幕的大小永远不要超过30%。

我试过设置一个百分比

width: auto;
height: 30%;

并设置em

width: auto;
height: 20em;

如果我使用max-height，我会从Kindlegen得到一个错误

.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可能有点令人生畏。我甚至看过一些畅销书，它们的布局并没有达到预期的效果。虽然我从来没有得到过在所有设备上看起来完全相同的电子书，但我已经能够令人满意地调整我的图像大小。我使用免费程序Sigil进行编辑，然后使用Calibre转换为.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); Style0002.css是我所有实际样式的位置。我的所有图书页面都链接到第一个样式表：

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

​

​