gpt4 book ai didi

css - 最大高度 : x% doesn't work on Chrome

转载 作者:技术小花猫 更新时间:2023-10-29 10:28:25 26 4
gpt4 key购买 nike

我需要使用 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中打开这个demo,可以显示整张图片,但在Chrome上图片会溢出窗口。有什么方法可以解决这个问题?谢谢你的帮助!

最佳答案

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

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

基本上你可以说:

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

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

关于css - 最大高度 : x% doesn't work on Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27992881/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com