Firefox中忽略的最大高度适用于Chrome和Safari

Question

我正在和班级一起制作幻灯片display.我想将图像的高度和宽度限制为窗口的最大值的80%,这样就不需要任何正常大小的滚动条.这是我使用的CSS:

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

它完全符合我希望它在Chrome和Safari中运行的方式,Firefox也承认最大宽度.但Firefox忽略了最大高度,因此大型垂直图像会脱离屏幕.

非常感谢您的帮助.

Answer 1

你需要告诉浏览器HTML身高和身体的高度.然后根据这些尺寸计算高度.以下适用于所有的保龄球.

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 height to

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

Answer 2

您需要设置容器元素或主体的高度：

body {
    height:100%;
    min-height:100%;
}