CSS图像大小

我正在创建一个ePub，我希望图像能够覆盖整个页面的宽度，但不能超过页面高度的100%

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

---

max height

似乎只是把图像压得不成比例，有什么想法吗？

我理解的唯一解决方案是，“不高=剪裁”。。。要保留比例：

使用

溢出：隐藏

HTML

演示
对于纵向格式的图像，您需要确保它们前面有分页符，或者在内部设置
分页符：避免并包装在一个100%高的容器中（或刚好低于该容器，这样它就不会溢出到下一页）。必须同时包含
margin:0 auto，这很奇怪和要显示的图像<代码>显示：内联块
，（特别是因为
内联块
不是epub2规范的正式部分），但您正在克服各种阅读器中的怪癖，以使图像居中：

css:

.imageWrapperHi{
身高：99%；
宽度：100%；
文本对齐：居中；
内部分页符：避免；
}
.imageWrapperHi img{
显示：内联块；
身高：100%；
保证金：0自动；
}

html:



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

css:

.imageWrapperWide{
宽度：100%；
文本对齐：居中；
内部分页符：避免；
}
.imageWrapperWide img{
显示：内联块；
宽度：100%；
保证金：0自动；
}

html:



我从来没有遇到过一个解决方案可以同时考虑这两种图像格式，除非您使用的是SVG包装器，它必须包含图像的所需维度：


最大宽度是否更符合逻辑？如果图像是页面的全宽，并保留其比例，如果浏览器的大小调整为小于图像的高度，您想怎么办？不高=剪裁？我认为原始海报是正确的：
最大宽度
将对宽度施加限制，而不是强制展开。正如我所读到的，他希望它只扩展到一个或多个边界。@chendriksen，你能澄清一点吗。如果您有一个完美的正方形图像，并且希望在水平显示器上显示它，该图像应该（1）在顶部或底部剪裁，（2）调整其纵横比（以便图像中的所有内容看起来都被压扁），还是（3）停止扩展，使其达到顶部和底部边缘，并且在左侧和右侧有空白？对不起，Danko，我应该更清楚，我实际上想要相反的结果！如果图像对于页面来说太高（因此溢出），我希望将图像缩放为100%宽度和相应高度。它的相应高度是页面的100%吗？
<div id="container">
  <img src=" "/>
</div>

* {
  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;
}