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

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

Answer 1

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

因此，如果您没有在父级上指定显式高度，那么子项max-height的基础高度就没有计算，因此max-height计算为none，让孩子尽可能高。现在作用于孩子的唯一其他约束是其父亲的max-width，并且因为图像本身比它宽，所以它向上溢出容器的高度，以便保持其纵横比，同时仍然如此尽可能大。

当做为父级指定显式高度时，子级知道它必须至多为该显式高度的100％。这允许它被约束到父级的高度（同时仍然保持其宽高比）。

Answer 2

.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中的较大图像上，使用inherit属性值得到了很好的结果。这会对你有帮助吗？

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

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

Answer 3

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

子级（删除与宽度相关的所有css ，即宽度：100％）：

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

您可以使用属性object-fit

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

与建议here

一样 Chris Mills在Dev.Opera的

A full explanation of this property

CSS-Tricks中的an even better one

支持

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

我刚检查过vivaldi和铬也支持它（这里不足为奇）

目前IE不支持，但是...... who cares？此外，iOS支持对象适合，但不支持对象位置，但它很快就会支持。

Answer 7

代替最高高度100％/ 100％，填充position: absolute的替代方法是使用<div class="flex-content"> <div class="scrollable-content-wrapper"> <div class="scrollable-content"> 1, 2, 3 </div> </div> </div>，顶部/底部/左侧/右侧设置为0。

换句话说，HTML如下所示：

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

consolidado = df_processos[
    df_processos['numero_unico'] == "Sem número único" |
    ~df_processos[df_processos['numero_unico'] != "Sem número único"].duplicated(
        subset='numero_unico', keep='last'
    )
]

您可以在Codesandbox - Overflow within CSS Flex/Grid

上看到一个实时示例

Answer 8

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

Answer 9

容器通常已经可以很好地包装内容了。相反，它通常效果不佳：孩子不能很好地满足他们的祖先。因此，请在最里面的元素而不是最外面的元素上设置width / height值，然后让外面的元素包装其内容。

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

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

Answer 10

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>

Answer 11

只需将 display: flex; 添加到容器中即可。 Look at this。

Answer 12

您的容器没有高度。

添加身高：200px;

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

最高身高的孩子：100％溢出父母

12 个答案: