无法让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％。