来自MOBI KindleGen的iPad点燃的图像CSS不变

Question

我正在用HTML编写电子书，并使用Kindlegen转换为MOBI。我想确保图像不会占用整个页面。但是，有些图像只是这样做的。

我尝试了多种CSS样式，但似乎没有什么改变。我正在Kindle Previewer，iPhone X，kindle paper white（旧设备）和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

Amazon上带有电子书的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); Style002.css 是我所有实际样式的所在地。我所有的书页都链接到第一个样式表：

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