我意识到有人问过类似的问题。我已经研究了所有这些,但仍然没有找到适合我的具体情况的解决方法。
请查看此调试页面:
[删除]
如果您在 Chrome 或 Safari 中打开此页面,您会注意到以下行为:
- 水平调整浏览器窗口大小时,图像的宽度会增大和缩小,但最大高度为浏览器窗口的 100%。
- 垂直调整浏览器窗口大小时,高度会强制为 100%,宽度可能会根据图像的纵横比缩小或增大,直至达到某个最大值。
以上是我想要跨浏览器传递的期望行为。但是,我无法让它在 Firefox 和 IE (10) 中正常工作。似乎 max-height 属性没有得到尊重。结果是在更宽的视口(viewport)上,图像的高度大于浏览器窗口,并且被截断了。
我在这个页面上的伪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。
最佳答案
愚蠢的我,虽然我确实在 html 和 body 上设置了 height:100%,但我没有在#image-wrapper 上设置它。那里我只有 max-height:100%。
关于css - 无法让 Firefox 或 IE 遵守最大高度,而 Chrome 和 Safari 可以,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16607813/