为什么 object-fit 不适用于 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