在Firefox中忽略最大高度，适用于Chrome和Safari [英] Max-height ignored in Firefox, works in Chrome and Safari

问题描述

我使用类 display 进行图片的幻灯片放映。我想将图像的高度和宽度限制为窗口的最大值的80％，因此不需要任何正常大小的滚动条。这里是我使用的CSS：

I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:

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

它完全按照我的要求在Chrome和Safari中工作，确认最大宽度。但是Firefox忽略了最大高度，所以大的垂直图像离开屏幕。

It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.

非常感谢任何帮助。

推荐答案

告诉浏览器 html 高度和正文高度。然后根据这些尺寸计算高度。以下工作正常在所有的弓。

You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.

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/

There's a working example here: http://jsfiddle.net/P7wfm/

如果您不想让图像裁剪如果他们超过80％的高度或宽度设置img高度为

If you don't want image to crop if they exceed the 80% height or width set img height to

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

这篇关于在Firefox中忽略最大高度，适用于Chrome和Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！