为什么对象适合不能使用max-height容器？

Question

我尝试将视频放入容器中，该容器有100％width且自动height尊重宽高比但设置了max-height。我希望视频能够填充整个容器，即使侧面被裁剪并且水平和垂直居中。

我使用fit-object属性，但显然它不能与max-height一起使用。

我会用图像简化它。结果应该是一样的。

HTML

<div>
    <img src="...">
</div>

CSS

div {
    width: 100%;
    overflow: hidden;
}
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

现在，如果我添加div样式height: 100px，它就可以了。如果我写max-height: 100px，它就不会。这是预期的行为吗？如果是这样，我该怎么做才能使它发挥作用？

这是jsFiddle：http://jsfiddle.net/1r4mLvLq/

Answer 1

仅当祖先元素具有明确的高度设置时，

height: 100%;才有效。

您可以通过添加此CSS来实现这一目标：

html, body {
  height: 100%;
  margin: 0;
}

Updated Fiddle