logo标签列表

Chrome浏览器不支持max-height: x%。

cssgoogle-chrome
13

我需要使用类似于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 中图片会超出窗口。是否有任何解决此问题的方法？感谢您的帮助！
1
祖先元素的高度在max-height中要使用百分比吗？请参考此示例。 - showdev
非常感谢您的回答。这正是我在寻找的。除了设置所有div的高度为100%之外，是否有更简单的方法？该图像始终嵌入许多div中。 - Rambo Li
我想你可以创建一个类似于.fullheight{height:100%;}的类，并将其应用于所有元素。但是，我喜欢Joseph Hansen在下面提出的想法。这对你有用吗？ - showdev
是的，它运行良好。谢谢！ - Rambo Li
@RamboLi，很高兴你从发布的答案中得到了一些帮助。此外，我建议你选择一个答案并使用勾选标记将其标记为已接受，并点赞所有帮助过你的答案。希望你享受在StackOverflow上的使用体验。 - Joseph Hansen
2个回答
15

有时候在布局中使用百分比来实现流式布局是棘手的，因为你必须处理容器和边框类型的事情。

您可能更喜欢使用视口单位。您可以在css-tricks上了解它们，而caniuse将向您展示其受支持程度如何。

基本上，您可以说：

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

意思是一个高度为55vh的div元素，其中1vh被定义为视口高度的1％的值。 高度为100vh的元素将占用视口高度的100％。

5

您需要为容器指定一个明确的值。这样做可以解决问题:

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

在您的情况下，该百分比是从代码片段中的 <html> 元素中获取。
来自MDN的说明：
百分比是相对于包含块的高度计算的。如果没有显式指定包含块的高度，则将处理百分比值为none。
我认为OP希望图像在百分比限制内具有响应性。 - showdev
感谢您的回答，虽然不是我想要的答案，但仍然很有帮助。 - Rambo Li
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接