关于CSS：最大高度的子级：100％溢出父级


Child with max-height: 100% overflows parent

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

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

测试案例：http：//jsfiddle.net/bq4Wu/16/

1
2
3
4
5
6
7
8
9
10
11
12
.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/

1
2
3
.container {  
    height: 200px;
}

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

当为孩子指定max-height的百分比时，奇怪的是，它是父级的实际身高的百分比，而不是父级的max-height。 max-width也是如此。

因此，当您没有在父级上指定显式高度时，就没有计算子级max-height的基本高度，因此max-height会计算为none，从而允许子级尽可能高。现在作用于子对象的唯一其他约束是其父对象的max-width，并且由于图像本身的高度大于宽度，因此它会向下倾斜容器的高度，以保持其宽高比，同时仍要总体可能。

当您确实为父母指定了明确的身高时，孩子就会知道它必须是该明确的身高的最多100％。这样就可以将其约束到父级的高度(同时仍保持其宽高比)。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;
}
1
2
3
4
5
6
7
8
9
<!-- example 1  -->

  <img class='img1' src="http://via.placeholder.com/350x450" />


<!-- example 2  -->


  <img class='img2' src="http://via.placeholder.com/350x450" />

我玩了一点。在Firefox中，使用较大的图像时，使用继承属性值可获得很好的效果。这对您有帮助吗？

1
2
3
4
5
6
7
8
9
10
11
12
.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}
相关讨论

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

之所以可行，是因为它存在于元素的宽度和填充底部之间的关系。所以：

父母：

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

子级(删除与宽度相关的所有CSS，即宽度：100％)：

1
2
3
4
5
6
7
8
9
img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;    
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

这是标记为该问题重复项的最近打开的问题的解决方案。 标签超出了父的最大高度。

破碎：小提琴

工作：小提琴

在这种情况下，将display:flex添加到2个父标记中就是答案

您可以使用属性object-fit

1
2
3
4
5
.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

喜欢这里建议

克里斯·米尔斯(Chris Mills)在Dev.Opera中对该物业的完整解释

还有一个更好的CSS-Tricks

在以下位置受支持

  • 铬31+
  • Safari 7.1以上
  • Firefox 36+
  • 歌剧26+
  • Android 4.4.4以上
  • iOS 8以上

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

IE目前不支持它，但是...谁在乎呢？另外，iOS支持对象适配，但不支持对象定位，但很快就会支持。

相关讨论

我最接近这个例子：

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

要么

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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。

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

不知道这是否适合您的需求，但是我似乎可以做到最好。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
       
            <img src="http://placekitten.com/400/500" />
       
    </body>
</html>
相关讨论

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

小提琴示例：https://jsfiddle.net/voan3v13/1/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

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

您的容器没有高度。

加
高度：200px；

放到容器CSS上，小猫就会留在里面。

相关讨论