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

Question

CSS标签object-fit:cover不会按预期在Chrome中裁剪/裁剪视频。

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

行为应如图这一形象（右上角）中：

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

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

画（与熊）应在50％的屏幕宽度被划分为图像（屏幕测试图片）： http://oi68.tinypic.com/x5b3vc.jpg http://oi68.tinypic.com/x5b3vc.jpg

用于演示的代码 -

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

​​3210

这怎么解决？

Answer 1

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