CSSタグ "object-fit：cover"はクロムでビデオをクロップ/クリップしません。

Question

CSSタグobject-fit:coverは、クロムのビデオを期待どおりにクリップ/クロップしません。

これはビデオでのみ、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に追加して解決しました。コンテナクラスに追加してみてください。うまくいくはずです。私のために動作しませんでした