CSS图片大小调整

Question

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

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

`max-height` 似乎只是扭曲了图片的比例，有什么想法吗？

- chendriksen

---

“max-width”不是更合乎逻辑吗？ - Paulie_D

如果图片是页面的满宽，并保持其比例，当浏览器调整大小小于图片高度时，您想要做什么？ - glomad

不是更高就是剪裁了？ - DaniP

我认为原帖作者是正确的：max-width将对宽度施加限制，而不是强制扩展。据我所读，他希望它仅扩展到达到一个或多个边框为止。 - Joe DeRose

@chendriksen，您能否再解释一下。如果您有一张完美的正方形图片，并且想在水平显示器上显示它，那么这张图片应该是（1）在顶部或底部被裁剪，（2）调整其纵横比（使图像中的所有内容看起来都被挤压），还是（3）停止扩展，以便它触及顶部和底部边缘，并且左右留有白色空间？ - Joe DeRose

@JoeDeRose 对我表述不够清晰，我深感抱歉。这些图片的形状各异，理想情况下是让一张图片占据整个屏幕的宽度，但如果这意味着它会溢出底部，则应该将其变为整个屏幕的高度。无论哪种方式，都要保持正确的比例。 - chendriksen

Answer 1

对于竖向格式的图片，您需要确保它们要么在分页符之前，要么设置page-break-inside:avoid;并且包裹在一个高度为100%（或略小于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>

- mzmm56

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/

- DaniP

---

抱歉，Danko，我应该表达得更清楚，实际上我想要相反的效果！如果图像太高而无法适应页面（因此溢出），我希望将图像缩放为100％宽度和相应的高度。 - chendriksen

它的高度是否占页面的100％？ - DaniP