css - 来自 MOBI KindleGen 的 iPad kindle 的图像 CSS 不变
问题描述
我正在用 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;
如果我使用 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>
最好的方法是什么?
解决方案
亚马逊上带有电子书的 CSS 可能有点令人生畏。我什至见过一些主要畅销书的布局没有按预期进行。尽管我从来没有让电子书在所有设备上看起来都完全相同,但我已经能够令人满意地调整图像大小。我使用免费程序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是我所有实际样式所在的位置。我所有的书页都链接到第一个样式表:
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>
.
推荐阅读
- c++ - 在静态方法中访问受保护的成员
- android - 创建一个带参数的 ViewModel
- java - 线程“main”中的异常 java.lang.NoClassDefFoundError: io/netty/resolver/AddressResolverGroup
- amazon-web-services - 云形成条件
- php - PHP:制作一个显示 cookie 的表格并允许用户选择和删除 cookie
- google-app-engine - 您能否在 Google 控制台中为已部署的 App 引擎应用程序编辑/修改源代码或 yaml 文件
- scala - 在两个向量中查找公共字符串
- pandas - Matplot 和 Pandas 数据透视表基于多个索引定义颜色
- python - 如何使用 python Selenium 关闭动态弹出窗口
- amazon-web-services - AWS CLI 返回 [WinError 2] 系统找不到指定的文件