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

【问题标题】：Image CSS not changing for iPad kindle from MOBI KindleGen来自 MOBI KindleGen 的 iPad kindle 的图像 CSS 不变
【发布时间】：2019-06-02 01:49:59
【问题描述】：

我正在用 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>

最好的方法是什么？

【问题讨论】：

标签： css kindle kindlegen

【解决方案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); Style0002.css 是我所有实际样式所在的位置。我所有的书页都链接到第一个样式表：

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

【讨论】：