CSS-tag "object-fit:cover" 不会在 Chrome 中裁剪/剪辑视频

Question

CSS-tag object-fit:cover 无法按预期在 Chrome 中剪辑/裁剪视频。

这仅适用于视频且仅在 Chrome 中。 图像在 Chrome 中正常。 在所有其他经过测试的浏览器中，图像和视频都可以正常工作。

行为应如下图所示（右上角）：

我有 created a demo 显示错误行为。

当您更改浏览器窗口大小时，您会看到效果。大高度和小宽度（以及小高度和大宽度）视频开始重叠，这是错误的。图像不重叠，因此是正确的。

视频（与熊）应按屏幕宽度的 50% 划分为图像（屏幕测试图片）：

演示代码 -

HTML

<div class="main">
  <div class="container" style="top:0; left:0">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:0%; left:50%">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:25%; left:0;">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:25%; left:50%">
    <video autoplay loop>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container" style="top:50%; left:0">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:50%; left:50%">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:75%; left:0">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
  <div class="container" style="top:75%; left:50%">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
  </div>
</div>

CSS

html, body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.main{
  position:relative;
  width: 100%;
  height: 100%;
}
.container{
  position:absolute;
  width:50%;
  height:25%;
}
img, video{
  position: relative;
  object-fit:cover;  /* This is the mainly problematic line*/
  overflow:hidden;
  width:100%;
  height:100%;
}

如何解决？

Answer 1

将-webkit-border-radius: 1px; 应用于视频作为解决Chrome 的错误https://bugs.chromium.org/p/chromium/issues/detail?id=400829#c31 的解决方法

Answer 2

我遇到了同样的问题，并通过将overflow:hidden; 添加到我的容器 div 来解决它。尝试将其添加到您的容器类中，它应该可以正常工作。