firefox - 在 Firefox 中忽略最大高度，在 Chrome 和 Safari 中有效

Question

我正在使用 display 类制作图像幻灯片。我想将图像的高度和宽度限制为最大窗口的 80%，这样就不需要任何正常尺寸的滚动条。这是我使用的 CSS:

.display {
    max-width: 80%;
    max-height: 80%;
}

它的工作方式完全符合我希望它在 Chrome 和 Safari 中的工作方式，而且 Firefox 也承认最大宽度。但是 Firefox 忽略了最大高度，所以大的垂直图像会离开屏幕。

非常感谢您的帮助。

Answer 1

您需要告诉浏览器html 高度和body 高度。然后它根据这些尺寸计算高度。以下适用于所有凉亭。

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.display {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

这里有一个工作示例:http://jsfiddle.net/P7wfm/

如果您不希望图像在超过 80% 高度或宽度时裁剪，请将 img 高度设置为

.display img {
    min-height: 100%;
    min-width: 100%;
}