最大高度：x% 在 Chrome 上不起作用答案

【问题标题】：max-height: x% doesn't work on Chrome最大高度：x% 在 Chrome 上不起作用
【发布时间】：2015-01-16 21:16:41
【问题描述】：

我需要使用像 max-width:90% 和 max-height:90% 这样的 css 样式来定义图像大小而不是溢出窗口。但是，这在 Safari 上运行良好，但在 Chrome 上却不行。这是我在 jsfiddle 上写的演示：http://jsfiddle.net/hello2pig/rdxuk7kj/

<style>
div{
    padding: 0;
    margin: 0;
}
.slide{
    text-align:center; 
    background-size: 100% 100%;
}
.user-img{
    max-height: 80%;
    max-width: 90%;
}
</style>

<body>
   <div class="slide">
      <div id="container0" class="container slideDown front">
         <div class="image-container">
         <img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>         
         </div>                 
      </div>
   </div>
</body>

如果您在 safari 中打开此演示，可以显示整个图像，但图像溢出 Chrome 上的窗口。有什么方法可以解决这个问题？谢谢你的帮助！

【问题讨论】：

max-height是哪个祖先身高的百分比？ See this example.
非常感谢您的回答。这就是我要找的。有没有更简单的方法而不是设置所有 div 高度：100%？图像总是嵌入到许多 div 中。
我想你可以创建一个像.fullheight{height:100%;} 这样的类并将其应用于所有元素。但是，我喜欢约瑟夫汉森的想法，如下。这对你有用吗？
是的。它运作良好。谢谢！
@RamboLi，很高兴您从发布的答案中获得了一些帮助。此外，我建议您选择一个使用复选标记将其标记为已接受的答案，并对所有对您有帮助的答案进行投票。希望您喜欢使用 StackOverflow。

标签： css google-chrome

【解决方案1】：

有时在布局中使用百分比来实现流动性很棘手，因为您必须处理容器和边框类型的东西。

您可能更喜欢使用视口单位。您可以在 css-tricks 上了解它们，caniuse 将向您展示它的支持程度。

基本上你可以说：

<div style="height: 55vh;">Hi</div>

表示高度为 55vh 的 div 元素，其中 1vh 定义为视口高度的 1% 的值。 100vh 的东西将是视口高度的 100%。

【讨论】：

【解决方案2】：

您需要为容器指定一个明确的值。这会起作用：

.image-container {
    width: 500px;
    height: 300px;
}

在您的情况下，% 取自小提琴中的 <html> 元素。

来自 MDN：

百分比

百分比是相对于高度计算的包含块。如果包含块的高度不是明确指定，百分比值被视为无。

【讨论】：

我认为 OP 希望图像在百分比范围内具有响应性。
非常感谢您的回答。这也很有帮助。