最大高度在Firefox中被忽略，在Chrome和Safari中工作

我正在用class

display

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

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

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

---

非常感谢您的帮助。

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

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

---

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

html { height: 100%; }

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

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

这里有一个工作示例：

如果您不希望图像超过80%的高度或宽度，请将img height设置为

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

---

我同意@Uds，您需要指定

主体

和

html

元素的高度和宽度

其他需要记住的事情： 此外，您还需要在CSS代码中定义浏览器，您可以通过以下方式进行定义：

.display{
  /* For general browser */
  max-width: 80%;
  max-height: 80%;

  /* For Firefox browser */
  -moz-width: 80%;
  -moz-height:80%;

  /* For Chrome and Safari browser */
  -webkit-width: 80%;
  -webkit-height:80%;

  /* For Opera browser */
  -o-width: 80%;
  -o-height:80%;
}

---

这将指定哪个浏览器应该有什么样的高度或宽度。

我今天也遇到了同样的问题，但有一个很好的转折点，我无法将所有父元素的高度设置为100%。
我在这里找到了这个问题的另一个解决方案的线索：

您不仅可以将%指定为最大高度，还可以将“em”指定为最大高度，因此，如果将html和正文的字体大小设置为100%，则其效果与百分比宽度类似

<div>
 <p>
    <img src="" alt="">    
 </p>
</div>

html,body{
font-size: 100%;
}

img{
max-width: 100%;
max-height: 50em;
}

html，正文{
字体大小：100%；
}
img{
最大宽度：100%；
最大高度：50em；
}

---

在Firefox 62.0上尝试了建议的解决方案但未成功，最大高度动画被忽略

---

在匹配动画持续时间更改“最大高度”属性时，也会出现延迟。

将

最大高度

更改为

80vh

对我有效。

指定身体高度为我解决了这一问题。不需要宽度声明。谢谢