我意识到有人问过类似的问题。我已经研究了所有这些，但仍然未能找到适合我具体情况的解决方案。
请查看此调试页面：
[已删除]
如果您在 Chrome 或 Safari 中打开此页面，您会注意到以下行为：
- 水平调整浏览器窗口大小时，图像的宽度会增大和缩小，但最大高度为浏览器窗口的 100%。
- 垂直调整浏览器窗口大小时，高度为 100%，宽度可能会根据图像的纵横比缩小或增大，直至达到某个最大值。
以上是我想要跨浏览器提供的所需行为。但是，我无法让它在 Firefox 和 IE (10) 中正常工作。似乎不尊重 max-height 属性。结果是在更宽的视口上，图像的高度大于浏览器窗口，并且被截断。
我在这个页面上的伪 html 结构如下：
html -> body -> image-container -> image-wrapper -> img
img 元素没有明确的内联宽度或高度设置，我在 CSS 中控制它：
#image-container img.tall {
display:block;
max-height:100%;
width:auto;
max-width:100%;
}
我从其他问题中读到，img 元素的所有父元素（例如 html、body）都需要设置为 height:100%; 这对我的实现来说是正确的，但 max-height 似乎仍然没有得到尊重，并且问题只出现在 Firefox 和 IE 中。
注意：我在所有元素上使用 box-sizing:border-box 。