有最大身高的孩子：100％会溢出父母
我试图了解什么似乎是我意想不到的行为：
我有一个最大高度为100％的容器，也使用最大高度的元素，但意外的是，孩子溢出父母：
testing案例： 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%; } 然而，如果父母被给予明确的高度，这是固定的：
testing案例： http : //jsfiddle.net/bq4Wu/17/
.container { height: 200px; }
有没有人知道为什么孩子在第一个例子中不尊重父母的最大高度？ 为什么需要一个明确的高度？
当你为一个孩子指定一个百分比的max-height时，它是父母的实际高度的百分比，而不是父母的max-height ， 足够古怪 。 这同样适用于max-width 。
所以，当你没有在父对象上指定一个明确的高度时，那么就没有可以从中计算出儿童的max-height基础高度，所以max-height计算为none ，允许孩子尽可能高。 现在唯一一个对孩子起作用的约束是其父母的max-width ，由于图像本身高于宽度，所以它向下溢出容器的高度，以便保持其高宽比，同时仍然大到总体可能。
当你为父母指定一个明确的高度时，那么孩子知道它必须是该高度的100％。 这样可以将其限制在父母的身高（同时仍保持其纵横比）。
我玩了一下。 在Firefox中的一个更大的图像，我使用inheritance属性值得到了一个很好的结果。 这会帮助你吗？
.container { background: blue; padding: 10px; max-height: 100px; max-width: 100px; text-align:center; } img { max-height: inherit; max-width: inherit; }
我在这里find了一个解决scheme： 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 */ }
我能得到的最接近的就是这个例子：
要么
.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%; }
主要的问题是高度占用容器高度的百分比，所以它正在父容器中寻找一个明确的设置高度，而不是它的最大高度。
我可以看到，在某种程度上，我可以看到的唯一方法是上面的小提琴你可以隐藏溢出，但填充仍然作为可见的空间，图像stream入，所以取而代之的是一个坚实的边界，而不是如果这是你需要的宽度添加边框，使其为200px）
不知道这是否适合你需要它，但最好的，我似乎可以达到。
您可以使用属性对象适合
.cover { object-fit: cover; width: 150px; height: 100px; }
就像这里提到的
Chris Mills在Dev.Opera中详细解释了这个属性
还有一个更好的CSS技巧
它支持
- Chrome 31+
- Safari 7.1+
- Firefox 36+
- 歌剧26+
- Android 4.4.4+
- iOS 8+
我只是检查了维瓦尔第和铬支持它（这里没有意外）
它目前不支持IE浏览器，但… 谁在乎 ？ 此外，iOS支持对象适合，但不支持对象的位置，但它很快。
也许别人可以解释你的问题背后的原因，但你可以通过指定容器的高度，然后设置图像的高度为100％来解决它。 height之前显示图像的width是很重要的。
<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>
你的容器没有高度。
添加高度：200px;
到容器CSS和小猫将留在里面。
