css - 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/