Question

我需要使用css样式，如max-width：90％和max-height：90％来定义图像大小不会溢出窗口。但是，这在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上的窗口。任何解决问题的方法？谢谢你的帮助！

Answer 1

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

您可能更喜欢使用视口单元。您可以在css-tricks了解相关信息，caniuse会向您展示支持效果。

基本上你可以说：

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

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

Answer 2

您需要为容器指定显式值。这可行：

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

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

来自MDN：

百分比

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

max-height：x％在Chrome上不起作用

2 个答案: