Question

我正在创建一个ePub，我希望这些图片能够跨越页面的整个宽度，但永远不会超过页面高度的100％。

理想情况下，如果图像比页面高（并因此被剪裁），那么它将被缩放到页面的100％高度，宽度相应地缩放。

max-height似乎只是压缩图像不成比例，任何想法？

Answer 1

对于纵向格式的图片，您需要确保它们之前是分页符，或者设置page-break-inside:avoid;并包装在100％高的容器中（或者只是在它之下，以便它不会不要溢出到下一页）。包含margin:0 auto;和图像display:inline-block;两者都很奇怪（特别是因为inline-block不是epub2规范的正式部分）但是你正在反对怪癖在各种读者中心的形象：

的CSS：

.imageWrapperHi {
    height:99%;
    width:100%;
    text-align:center;
    page-break-inside:avoid;
}
.imageWrapperHi img {
    display:inline-block;
    height:100%;
    margin:0 auto;
}

HTML：

<div class="imageWrapperHi">
    <img alt="" src="../Images/img1.jpg"/>
</div>

对于风景图像，您还需要将图像包装在设置为100％宽度的容器中，然后以百分比形式调整图像本身的大小。

的CSS：

.imageWrapperWide {
    width:100%;
    text-align:center;
    page-break-inside:avoid;
}
.imageWrapperWide img {
    display:inline-block;
    width:100%;
    margin:0 auto;
}

HTML：

<div class="imageWrapperWide">
    <img alt="" src="../Images/img1.jpg"/>
</div>

除非您使用的SVG包装器必须包含所需的图像尺寸，否则我从来没有遇到过这两种图像格式的解决方案：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 <image width> <image height>" preserveAspectRatio="xMidYMid meet">
    <image width="<image width>" height="<image height>" xlink:href="../Images/cover.jpg"/>
</svg>

Answer 2

只有我理解的解决方案，“不高=裁剪”......保留比例：

制作一个overflow:hidden

的容器

HTML

<div id="container">
  <img src=" "/>
</div>

CSS

* {
  margin:0;
  padding:0;
}
body, html { 
  height:100%;
}
#container {
  max-width:100%;
  height:100%;
  max-height:100%;
  overflow:hidden;
}
#container img {
  width:100%;
  height:auto;
}

演示 http://jsfiddle.net/zbvhx/

CSS图像大小

2 个答案: