子节点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吗?为什么需要显式高度?

当前回答

也许其他人可以解释你的问题背后的原因，但你可以通过指定容器的高度，然后将图像的高度设置为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

其他回答

容器通常已经很好地包装了它们的内容。反之往往就不一样了:孩子们不能很好地满足他们的祖先。因此，在最里面的元素上设置宽度/高度值，而不是在最外面的元素上，并让外面的元素包装它们的内容。

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

2020-03-09 21:50:35

我能想到的最接近这一点的例子是:

http://jsfiddle.net/YRFJQ/1/

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

img { 
  display: block;
  max-height: 100%; 
  max-width: 100%; 
}

主要问题是高度占容器高度的百分比，所以它在父容器中寻找显式设置的高度，而不是max-height。

在某种程度上，我能看到的唯一方法是上面的方法，你可以隐藏溢出，但填充物仍然作为图像流入的可见空间，所以用实边代替(然后添加边界框，使它200px如果这是你需要的宽度)

不确定这是否符合你的需要，但我能做到的最好了。

2013-01-10 17:17:47

当你为子结点的max-height指定一个百分比时，它是父结点实际高度的百分比，而不是父结点max-height的百分比，这很奇怪。这同样适用于max-width。

当你没有在父节点上指定显式高度时，子节点的max-height就没有基础高度可供计算，因此max-height计算为none，允许子节点尽可能高。现在作用于子对象的唯一其他约束是父对象的max-width，由于图像本身的高度大于宽度，因此它向下溢出容器的高度，以保持其纵横比，同时仍然尽可能大。

当你为父节点指定显式高度时，子节点知道它最多只能是那个显式高度的100%。这允许它被限制到父元素的高度(同时仍然保持它的纵横比)。

2013-01-10 17:11:21

<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

我在这里找到了一个解决方案: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

这个技巧是可行的，因为它存在元素的WIDTH和PADDING-BOTTOM之间的关系。所以:

家长:

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

子(删除所有与width相关的CSS，即width:100%):

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

2014-11-21 15:51:43

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

推荐文章

最新文章

标签