我试图理解对我来说似乎是意外的行为：
我在一个容器内有一个最大高度为 100% 的元素，该元素也使用最大高度，但出乎意料的是，子级溢出了父级：
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}<div class="container">
<img src="http://placekitten.com/400/500" />
</div>但是，如果父级被赋予显式高度，则这是固定的：
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
height: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}<div class="container">
<img src="http://placekitten.com/400/500" />
</div>有谁知道为什么孩子在第一个例子中不尊重父母的最大身高？为什么需要明确的高度？
当您为孩子指定max-height的百分比时，它是父母实际身高的百分比，而不是父母的max-height，奇怪的是。这同样适用于max-width。
因此，当您没有在父级上指定显式高度时，则没有要计算孩子max-height的基本高度，因此max-height计算为none，允许孩子尽可能高。现在作用于子项的唯一其他约束是其父项的max-width，并且由于图像本身的高度大于宽度，因此它会向下溢出容器的高度，以保持其纵横比，同时保持整体上尽可能大。
当您为父级指定显式高度时，子级知道它最多必须是该显式高度的 100%。这允许它被限制为父级的高度(同时仍然保持其纵横比(。
.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;
}
而不是使用最大高度：100%/100%，填充所有空间的另一种方法是使用顶部/底部/左侧/右侧设置为 0 的position: absolute。
换句话说，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 {
/* Add styling here */
}
在下面尝试：
.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;
}
html {
height: 50%;
width: 50%;
}
body {
height: 100%;
width: 100%;
}
.parent {
height: 100%;
outline: 1px solid red;
}<html>
<body>
<div class="parent">
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content" id="scrollable">
1, 2, 3
</div>
</div>
</div>
</div>
<button onClick="scrollable.innerText += 'nSome more text'" style="margin-top: 1rem;">Add Line</button>
<p>
The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
</p>
</body>
</html>我在这里找到了一个解决方案：http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
这个技巧是可能的，因为它存在于元素的 WIDTH 和填充底部之间。所以：
父母：
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 */
}
您可以使用属性 object-fit
.cover {
object-fit: cover;
width: 150px;
height: 100px;
}
就像这里建议的那样
克里斯·米尔斯在Dev.Opera中对此属性的完整解释
还有一个更好的CSS技巧
它受支持
- 铬 31+
- 野生动物园 7.1+
- 火狐 36+
- 歌剧 26+
- 安卓 4.4.4+
- iOS 8+
我刚刚检查了 vivaldi 和铬也支持它(这里不足为奇(
IE目前不支持它，但是...谁在乎啊？此外，iOS 支持对象拟合，但不支持对象位置，但很快就会支持。
这是最近打开的问题的解决方案，标记为此问题的副本。 <img>标签超过了父<div>的最大高度。
破碎：小提琴
工作：小提琴
在这种情况下，将display:flex添加到 2 个父 <div> 标签是答案
也许其他人可以解释问题背后的原因，但您可以通过指定容器的高度，然后将图像的高度设置为 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>
我能得到的最接近这个的例子是这个例子：
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%;
}
主要问题是高度采用容器高度的百分比，因此它在父容器中寻找明确设置的高度，而不是最大高度。
在某种程度上，我可以看到的唯一方法是上面的小提琴，您可以在其中隐藏溢出，但是填充仍然充当图像流入的可见空间，因此用实心边框替换是有效的(然后添加边框以使其为200px，如果这是您需要的宽度(
不确定这是否符合您的需求，但我似乎可以做到的最好。
一个好的解决方案是不在父级上使用高度，而只在具有 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;
}
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>