max-height:x%在Chrome上不起作用

Question

max-height:x%在Chrome上不起作用

我需要使用像max-width这样的css样式: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>

Run Code Online (Sandbox Code Playgroud)

如果您在safari中打开此演示,则可以显示整个图像,但图像会溢出Chrome上的窗口.任何解决问题的方法？谢谢你的帮助!

Answer 1

Jos*_*sen 14

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

您可能更喜欢使用视口单元.您可以通过css-tricks了解它们,caniuse将向您展示它的支持程度.

基本上你可以说:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

Mos*_*sho 5

您需要为容器指定显式值.这可行:

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

Run Code Online (Sandbox Code Playgroud)

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

来自MDN:

百分比

百分比是根据包含块的高度计算的.如果未明确指定包含块的高度,则将百分比值视为无.

归档时间：	10 年，10 月前
查看次数：	12407 次
最近记录：	8 年，4 月前