我需要使用类似于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中,图像会溢出窗口。 有什么方法可以解决这个问题吗?谢谢您的帮助!如果您在 Safari 中打开此演示,则可以完整显示整张图片,但在 Chrome 中图片会超出窗口。是否有任何解决此问题的方法?感谢您的帮助!
max-height
中要使用百分比吗?请参考此示例。 - showdev.fullheight{height:100%;}
的类,并将其应用于所有元素。但是,我喜欢Joseph Hansen在下面提出的想法。这对你有用吗? - showdev