CSS 图像大小

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/