CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

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

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

The behavior should be as shown in this image (top right):

I have 创建了一个演示 https://jsfiddle.net/xt0xcxzu/5/这表明了错误的行为。

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

Videos (with the bear) should be divided at 50% screen width as the images (screen test pictures):

演示代码 -

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%;
}

如何解决这个问题？

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