无法让Firefox或IE尊重max-height，而Chrome和Safari则可以

Question

我意识到已经提出了类似的问题。我已经对它们进行了全部研究，但仍未能找到适合我具体情况的修复方法。

请查看此调试页面：

[移除]

如果您要在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。

Answer 1

愚蠢的我，虽然我确实设置了高度：100％的html和身体，我没有在＃image-wrapper上设置它。在那里我有最大高度：仅100％。