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

Question

CSS标记object-fit:cover无法按预期裁剪/裁剪Chrome中的视频。

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

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

我创建了一个演示，显示了错误的行为。

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

视频（带有熊）应按屏幕宽度的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 来解决它。尝试将其添加到您的容器类中，它应该可以正常工作。