子节点max-height: 100%溢出父节点

我在试着理解对我来说似乎出乎意料的行为:

我在一个容器中有一个max-height为100%的元素，该容器也使用了max-height，但出乎意料的是，子元素溢出了父元素:

.container { 背景:蓝色; 填充:10 px; max-height: 200 px; max-width: 200 px; ｝ img { 显示:块; max-height: 100%; max-width: 100%; ｝ < div class = "容器" > <img src="http://placekitten.com/400/500" /> < / div >

但是，如果父节点被指定了显式的高度，这个值是固定的:

.container { 背景:蓝色; 填充:10 px; max-height: 200 px; max-width: 200 px; 身高:200 px; ｝ img { 显示:块; max-height: 100%; max-width: 100%; ｝ < div class = "容器" > <img src="http://placekitten.com/400/500" /> < / div >

有人知道为什么在第一个例子中子节点不尊重父节点的max-height吗?为什么需要显式高度?

当前回答

.container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; float: left; margin-right: 20px; } .img1 { display: block; max-height: 100%; max-width: 100%; } .img2 { display: block; max-height: inherit; max-width: inherit; }  <div class="container"> <img class='img1' src="http://via.placeholder.com/350x450" /> </div>  <div class="container"> <img class='img2' src="http://via.placeholder.com/350x450" /> </div>

我玩了一下。在firefox中使用较大的图像时，我使用继承属性值得到了很好的结果。这对你有帮助吗?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

2013-01-10 17:47:31

其他回答

一个很好的解决方案是在父对象上不使用height，只在带有View Port的子对象上使用它:

例如:https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

2018-02-13 10:24:47

这里是一个解决最近打开的问题，标记为这个问题的副本。<img>标签超过了父标签<div>的max-height。

破碎:小提琴

工作:小提琴

在这种情况下，向2个parent <div>标记添加display:flex就是答案

2018-05-10 20:43:07

http://jsfiddle.net/mpalpha/71Lhcb5q/

.container { 显示:flex; 背景:蓝色; 填充:10 px; max-height: 200 px; max-width: 200 px; ｝ img { object-fit:包含; max-height: 100%; max-width: 100%; ｝ < div class = "容器" > <img src="http://placekitten.com/400/500" /> < / div >

2020-09-24 11:16:15

我玩了一下。在firefox中使用较大的图像时，我使用继承属性值得到了很好的结果。这对你有帮助吗?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

2013-01-10 17:47:31

也许其他人可以解释你的问题背后的原因，但你可以通过指定容器的高度，然后将图像的高度设置为100%来解决这个问题。重要的是，图像的宽度出现在高度之前。

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

2013-01-10 16:52:33

子节点max-height: 100%溢出父节点

推荐文章

最新文章

标签