我意识到有人问过类似的问题。我已经研究了所有这些,但仍然未能找到适合我具体情况的解决方案。
请查看此调试页面:
[已删除]
如果您在 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 。