无法让Firefox或IE尊重最大

2018-06-22 23:59:56

我意识到类似的问题已经被问到。我已经研究过他们，但仍未能找到解决我的具体情况的方法。

请查看这个调试页面：

[除去]

如果您想在Chrome或Safari中打开此页面，您会注意到以下行为：

在水平调整浏览器窗口大小时，图像会随着宽度的增加而缩小，但最大高度为浏览器窗口的100％。

在垂直调整浏览器窗口大小时，会强制执行100％的高度，并且宽度可能会缩小或根据图像的高宽比增长，直到达到某个最大值。

以上是我希望跨浏览器提供的理想行为。但是，我无法使其在Firefox和IE（10）中正常工作。似乎最大高度属性不受尊重。结果是，在更宽的视口中，图像的高度比浏览器窗口大，并且被切断。

我在这个页面上的伪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％; 这对我的实现是正确的，但最大高度仍然不被尊重，并且问题只发生在Firefox和IE中。

注意：我在所有元素上使用框大小：边框。

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

链接地址: http://www.djcxy.com/p/64499.html