小编bat*_*eus的帖子

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" …