为什么 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%;
}

现在，如果我添加到divstyle height: 100px，它会起作用。如果我写max-height: 100px，它不会。这是预期的行为吗？如果是这样，我该怎么做才能让它发挥作用？

Answer 1

height: 100%; 仅当祖先元素具有明确的高度集时才有效。

您可以通过添加以下 CSS 来实现：

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