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

Question

CSS 标签 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