max-height：x％在Chrome上无法使用 [英] max-height: x% doesn't work on Chrome
问题描述
我需要使用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 =container0class =container slideDown front>
< div class =image-container>
< img src =http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpgclass =user-img>< / img>
< / div>
< / div>
< / div>
< / body>
如果您在safari中打开此演示，则可以显示整个图像， 。任何方法来解决这个问题？谢谢你的帮助！
有些时候使用布局中流动性的百分比是棘手的，因为你必须处理容器和边框类型的东西。 p>
您应该查看使用视口单位。您可以在 css-tricks 和 caniuse 将向您显示它的支持情况。
基本上您可以说：
< div style =height：55vh;> Hi< / div>
意味着55vh高度的div元素，其中1vh定义为视口高度的1％的值。
I need to use css style like max-width:90% and max-height:90% to define image size not overflow the windows. However, this work well on Safari but not work on Chrome. Here is the demo I write on 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>
If you open this demo in safari, whole image can be displayed, but image overflow the window on Chrome. Any method to fix the problem? Thanks for your help!
Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.
You should look in to using viewport units. You can learn some thing about it on css-tricks and caniuse will show you how well it's supported.
Essentially you can say:
<div style="height: 55vh;">Hi</div>
meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height.
这篇关于max-height：x％在Chrome上无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
