html - 响应对象适合 : cover fix on Chrome

Question

我知道还有其他关于此的问题，但它们是旧的并且没有更新浏览器当前的支持。而且他们没有涵盖 Chrome 的特定问题。

我想要一个视频(我也想用图像来做，但在这里我使用的是视频)占据窗口 100% 的宽度，但容器具有有限的指定高度。保持视频的纵横比(这非常重要)。

基本上，object-fit: cover 在这里可以很好地完成工作。在 Safari 中完美运行，视频放大/缩小在他的容器内保持纵横比。

在 Chrome 中也会发生这种情况，但不考虑容器的高度。元素超过其容器的高度，并根据窗口的宽度不断增长到底部。

object-fit: fill 在两种浏览器中都运行良好，但这里的问题很明显，纵横比没有得到遵守，使视频/图像/等变形。

这是我所拥有的:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
</video>

CSS

#bgvid {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

我的问题是，我怎样才能使这项工作完美地尊重容器高度(或至少最小高度或最大高度)，在所有浏览器中响应，保持元素的纵横比？

---

Answer 1

这是我自己打的。看起来如果您将视频元素包装在一个 div 中并将溢出设置为隐藏，那么它将解决 Chrome 的错误，即类似于:

<div class="wrapper">
  <video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
  </video>
</div>

使用 CSS

#bgvid {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

.wrapper {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  overflow: hidden;
}

我还刚刚发现了一些问题文件，似乎涵盖了 Chrome 在这方面的错误:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890