【发布时间】：2015-08-11 01:27:57
【问题描述】：
我正在为我的姻亲构建一个 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，并使用了开发者工具来确保所有的连接都是正确的。如果我在 Chrome 中使用div.sized { max-width: 40%; height: auto; }，图像会适当调整大小。
我在这里做一些基本的错误吗？ iBooks 是否不支持这种 CSS 大小调整？ 有没有其他方法可以实现我想要的？
提前致谢。
【问题讨论】：
-
更多信息：如果我将 CSS 更改为
div.sized { max-height: 400px; width: auto; }，那么图片会相应地更改大小。对于单一屏幕尺寸。