我试图了解对我来说似乎是意外的行为：
我在容器内有一个最大高度为100％的元素，该容器也使用最大高度，但是，出乎意料的是，子代溢出了父代：
测试案例：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%;
}但是，如果给定父级的显式高度，则此问题是固定的：
测试案例：http：//jsfiddle.net/bq4Wu/17/
.container {
height: 200px;
}有谁知道为什么孩子在第一个例子中不尊重父母的最大身高？为什么需要一个明确的高度？
Answers:
当您指定的百分比max-height上一个孩子，这是父母的实际高度的百分比，而不是父母的max-height，奇怪的。同样适用于max-width。
因此，如果您没有在父级上指定显式的身高，那么就没有max-height要计算的孩子的基本身高，因此max-height计算为none，可以使孩子尽可能高。现在，作用于孩子的唯一其他约束是max-width其父对象的约束，并且由于图像本身的高度大于宽度，因此为了保持其长宽比，同时仍要尽可能大地增大容器的高度，该图像向下溢出。
当您确实为父母指定了明确的身高时，孩子就会知道它必须是该明确的身高的最多100％。这样就可以将其约束到父级的高度（同时仍保持其宽高比）。
display: flex; flex-direction: column解决了问题，并添加了所需的滚动条。
我玩了一点。在Firefox中，使用较大的图像时，使用继承属性值可获得很好的效果。这对您有帮助吗？
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}max:height: 100%不是固定高度时不起作用
dispaly: flex;。我打开了一个新线程：我打开了一个新线程：stackoverflow.com/questions/29732391/… 但是，在更坏的情况下，我可以使用Jquery来获取img的实际宽度和高度，并将它们设置在父图像的div中。
我在这里找到了解决方案：http : //www.sitepoint.com/maintain-image-aspect-ratios-sensitive-web-design/
之所以可行，是因为它存在于元素的宽度和填充底部之间的关系。所以：
父母：
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 */
}您可以使用属性object-fit
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}喜欢这里建议
Chris Mills在Dev.Opera 中对该属性的完整解释
还有一个更好的CSS-Tricks
在以下位置受支持
我刚刚检查了维瓦尔第和铬也支持它（这里不足为奇）
IE当前不支持它，但是... 谁在乎呢？此外，iOS支持对象适配，但不支持对象定位，但很快就会支持。
而不是使用max-height：100％/ 100％，填充position: absolute顶部空间的另一种方法是将top / 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中的溢出
也许其他人可以解释问题背后的原因，但是您可以通过指定容器的高度，然后将图像的高度设置为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>我最接近这个例子：
要么
.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像素（如果这是您需要的宽度）
不知道这是否适合您的需求，但我似乎能做到最好。
一个好的解决方案是不要在父级上使用高度，而仅在带有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;
}容器通常已经可以很好地包装其内容了。相反，它通常效果不佳：孩子不能很好地满足他们的祖先。因此，将宽度/高度值设置在最里面的元素而不是最外面的元素上，然后让外面的元素包装它们的内容。
.container {
background: blue;
padding: 10px;
}
img {
display: block;
max-height: 200px;
max-width: 200px;
}