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來解決它。嘗試將其添加到您的容器類，它應該工作正常。