CSS 具有最大高度的子级：100% 溢出父级

Child with max-height: 100% overflows parent

提问by iamkeir

I'm trying to understand what appears to be unexpected behaviour to me:

我试图了解对我来说似乎是意外的行为：

I have an element with a max-height of 100% inside a container that also uses a max-height but, unexpectedly, the child overflows the parent:

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

Test case: http://jsfiddle.net/bq4Wu/16/

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

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

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

This is fixed, however, if the parent is given an explicit height:

但是，如果给父母一个明确的高度，这是固定的：

Test case: http://jsfiddle.net/bq4Wu/17/

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

.container {  
    height: 200px;
}

Does anyone know why the child would not honour the max-height of its parent in the first example? Why is an explicit height required?

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

回答by BoltClock

When you specify a percentage for max-heighton a child, it is a percentage of the parent's actual height, not the parent's max-height, oddly enough. The same applies to max-width.

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

So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-heightto be calculated from, so max-heightcomputes to none, allowing the child to be as tall as possible. The only other constraint acting on the child now is the max-widthof its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.

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

When you dospecify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height. That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).

当你做指定家长一个明确的高度，那么孩子知道它是在显式高度的至多100％。这允许它被限制为父级的高度（同时仍然保持其纵横比）。

回答by Daniel

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

I played around a little. On a larger image in firefox, I got a good result with using the inherit property value. Will this help you?

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

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

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

回答by Niente1

I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

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

The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element. So:

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

parent:

家长：

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

child (remove all css related to width, i.e. width:100%):

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 */
  }

回答by Luis Sieira

You can use the property object-fit

您可以使用属性object-fit

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

Like suggested here

喜欢这里建议

A full explanation of this propertyby Chris Mills in Dev.Opera

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

And an even better onein CSS-Tricks

还有一个更好的 CSS-Tricks

It's supported in

它支持

• Chrome 31+
• Safari 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4+
• iOS 8+

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

I just checked that vivaldi and chromium support it as well (no surprise here)

我刚刚检查了 vivaldi 和 Chromium 也支持它（这并不奇怪）

It's currently not supported on IE, but... who cares? Also, iOS supports object-fit, but not object-position, but it will soon.

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

回答by CrazyPaste

Here is a solution for a recently opened question marked as a duplicate of thisquestion. The <img>tag was exceeding the max-height of the parent <div>.

这是最近打开的问题的解决方案，标记为该问题的重复项。该<img>标签被超过母公司的最大高度<div>。

Broken: Fiddle

破碎：小提琴

Working: Fiddle

工作：小提琴

In this case, adding display:flexto the 2 parent <div>tags was the answer

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

回答by Tianzhen Lin

Instead of going with max-height: 100%/100%, an alternative approach of filling up all the space would be using position: absolutewith top/bottom/left/right set to 0.

与 max-height: 100%/100% 不同，填充所有空间的另一种方法是将position: absolutetop/bottom/left/right 设置为 0。

In other words, the HTML would look like the following:

换句话说，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 {
}

You can see a live example at Codesandbox - Overflow within CSS Flex/Grid

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

回答by Kevin Brydon

Maybe someone else can explain the reasons behind your problem but you can solve it by specifying the height of the container and then setting the height of the image to be 100%. It is important that the widthof the image appears before the height.

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

回答by ashleynolan

The closest I can get to this is this example:

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

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

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

or

或者

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

The main problem is that the height takes the percentage of the containers height, so it is looking for an explicitly set height in the parent container, not it's max-height.

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

The only way round this to some extent I can see is the fiddle above where you can hide the overflow, but then the padding still acts as visible space for the image to flow into, and so replacing with a solid border works instead (and then adding border-box to make it 200px if that's the width you need)

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

Not sure if this would fit with what you need it for, but the best I can seem to get to.

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

回答by tibbus

A good solution is to not use height on the parent and use it just on the child with View Port:

一个好的解决方案是不要在父级上使用高度，而只在具有View Port的子级上使用它：

Fiddle Example: https://jsfiddle.net/voan3v13/1/

小提琴示例：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;
}

回答by Dave Cousineau

Containers will already generally wrap their content nicely. It often doesn't work as well the other way around: children don't fill their ancestors nicely. So, set your width/height values on the inner-most element rather than the outer-most element, and let the outer elements wrap their contents.

容器通常已经很好地包装了它们的内容。反过来，它通常不会奏效：孩子们不能很好地满足他们的祖先。所以，在最里面的元素而不是最外面的元素上设置你的宽度/高度值，让外面的元素包裹它们的内容。

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

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