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设置为

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

Answer 2

我同意 @Uds ，您需要指定body和{{1}的高度和宽度元素

要记住的其他事项：

此外，您还需要在CSS代码中定义浏览器，您可以通过以下方式定义它：

html

这将指定哪个浏览器应具有哪种高度或宽度。

Answer 3

您需要为容器元素或正文设置高度：

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

Answer 4

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

更改max-height属性以匹配动画的持续时间也存在延迟。

Answer 5

我今天遇到了同样的问题，但是我不能将所有父母元素设置为100％的高度。
我在这里找到了解决这个问题的另一个方法的线索：

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

您不仅可以将％分配给最大高度，还可以分配“em”，因此如果将html和body设置为100％的字体大小，则其工作方式与百分比宽度相似。

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

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

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

DEMO

Answer 6

将 max-heigth 更改为 80vh 对我有用。

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

6 个答案:

要记住的其他事项：