html - 在 EPUB (v3) 中调整图像大小

Question

我正在为我的姻亲制作一个 EPUB，其中包含一系列旧扫描图片以及评论。

EPUB 中的每个“页面”都包含带有图片编号、图片和一些文本的标题。 EPUB 中的图片大小为 1024x768，我正在尝试使用 CSS 调整图像大小以显示在页面上。 (我可以把图片缩小，但我想让读者点击图片，如果他们想要的话，可以得到更大的图片)

它的 HTML 看起来像这样:

<div class="keepTogether">
    <h5>50001</h5>
    <div class="sized">
        <img alt="50001" src="images/50001-Front.jpg"/>
    </div>
    <p>
    #50001 Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </p>
</div>

CSS 是:

div.keepTogether {display:inline-block; page-break-before:always;}
h5 { text-align: center; font-style:italic; margin: 0px; }
div.sized { max-height: 40%; width: auto; }
img { max-width: 100%; max-height: 100%; }

问题是这行不通。这些图像几乎全屏显示在页面上(在 Mac 和 iPad 上的 iBooks 中)，只有标题与它们共享页面。文本大部分被推到下一页。

我已经在 Chrome 中加载了 HTML，并使用开发者工具来确保所有连接都是正确的。如果我使用 div.sized { max-width: 40%;高度:自动； 在 Chrome 中，图像会适当调整大小。

我在这里做错了什么吗？iBooks 不支持这种 CSS 大小调整吗？是否有其他方法可以完成我想要的？

提前致谢。

Answer 1

我在调整图像大小方面有多种体验，这取决于读者和缩放图像本身或将其嵌入到缩放的 div 元素中。

在这边 Bookalope我们确实限制了 div 元素的使用，并且只在图像周围使用它来缩放它。尝试将 width:100% 和 height:100% 添加到 img 元素。此外，iBooks 在图像大小调整方面确实有一些怪癖:看看 this发布，尽管它可能有些过时。

您是否正在尝试为您的图片设置标题？