最大高度：x% 不适用于 Chrome

Question

我需要使用 css 样式，例如 max-width:90% 和 max-height:90% 来定义图像大小，使其不会溢出 windows。但是，这在 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中打开这个demo，可以显示整张图片，但是图片溢出了Chrome上的window。有什么方法可以解决这个问题？谢谢你的帮助！

Answer 1

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

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

在您的例子中，% 取自 fiddle 中的 <html> 元素。

来自 MDN：

percentage

The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.

Answer 2

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

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

基本上你可以说：

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

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

最大高度：x% 不适用于 Chrome

max-height: x% doesn't work on Chrome

css

google-chrome