css - 最大高度的孩子：100% 溢出父母

Question

我试图了解对我来说似乎出乎意料的行为：

我在一个也使用最大高度的容器中有一个最大高度为 100% 的元素，但出乎意料的是，子元素溢出了父元素：

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

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

但是，如果给父级指定了明确的高度，则这是固定的：

测试用例：http: //jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

有谁知道为什么孩子在第一个例子中不尊重其父母的最大高度？为什么需要明确的高度？

score 292 · Accepted Answer

当您为孩子指定百分比时max-height，它是父母实际身高的百分比，而不是父母的max-height，奇怪的是。这同样适用于max-width。

因此，当您未在父项上指定显式高度时，则没有max-height要计算子项的基本高度，因此max-height计算为none，允许子项尽可能高。现在作用于子级的唯一其他约束是max-width其父级的，并且由于图像本身的高度大于宽度，它会向下溢出容器的高度，以便在保持其纵横比的同时仍然尽可能大。

当您为父级指定显式高度时，子级知道它最多必须是该显式高度的 100%。这允许它被限制在父级的高度（同时仍保持其纵横比）。

score 92 · Accepted Answer

.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;
}

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<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;
}

score 11 · Accepted Answer

除了使用 max-height: 100%/100%，另一种填充所有空间的方法是使用position: absolutetop/bottom/left/right 设置为 0。

换句话说，HTML 将如下所示：

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.scrollable-content {
}

您可以在Codesandbox - CSS Flex/Grid 中的溢出中看到一个实时示例

score 8 · Accepted Answer

我在这里找到了解决方案： 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 */
  }

child（删除所有与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 */
  }

score 5 · Accepted Answer

您可以使用属性object-fit

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

就像这里建议的一样

Chris Mills 在 Dev.Opera中对此属性的完整解释

还有一个更好的 CSS-Tricks

它支持在

铬 31+
Safari 7.1+
火狐 36+
歌剧 26+
安卓 4.4.4+
iOS 8+

我刚刚检查了维瓦尔第和铬也支持它（这里不足为奇）

IE 目前不支持它，但是……谁在乎呢？此外，iOS 支持 object-fit，但不支持 object-position，但很快就会支持。

score 3 · Accepted Answer

这是最近打开的问题的解决方案，标记为该问题的副本。标签超过了 parent的<img>最大高度<div>。

破碎：小提琴

工作：小提琴

在这种情况下，添加display:flex到 2 个父<div>标签就是答案

score 2 · Accepted Answer

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

<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>

score 2 · Accepted Answer

我能得到的最接近的是这个例子：

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%; 
}

主要问题是高度占容器高度的百分比，因此它在父容器中寻找明确设置的高度，而不是最大高度。

在某种程度上，我可以看到的唯一方法是上面的小提琴，您可以在其中隐藏溢出，但是填充仍然充当图像流入的可见空间，因此用实心边框代替（然后如果这是您需要的宽度，请添加边框框以使其为 200 像素）

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

score 2 · Accepted Answer

一个好的解决方案是不在父级上使用高度，而只在具有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;
}

score 2 · Accepted Answer

2

只需添加display: flex;到容器中即可。看看这个。

于 2021-04-02T14:30:40.440 回答

score 1 · Accepted Answer

容器通常已经很好地包装了它们的内容。反过来，它通常也不能很好地工作：孩子们不能很好地满足他们的祖先。因此，在最里面的元素而不是最外面的元素上设置宽度/高度值，并让外部元素包裹它们的内容。

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

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

score 1 · Accepted Answer

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

.container {  
display: flex;
  background: blue; 
  padding: 10px; 
  max-height: 200px; 
  max-width: 200px; 
}

img { 
 object-fit: contain;
  max-height: 100%; 
  max-width: 100%; 
}

<div class="container">
  <img src="http://placekitten.com/400/500" />
</div>

score 0 · Accepted Answer

0

您的容器没有高度。

添加高度：200px；

到容器 css 和小猫将留在里面。

于 2013-01-10T17:22:20.537 回答

css - 最大高度的孩子：100% 溢出父母

13 回答 13

Related

Reference