CSS-Tag "object-fit: cover" schneidet keine Videos in Chrome

Question

CSS-Tag object-fit:cover schneidet/schneidet Videos nicht wie erwartet in Chrome ab.

Dies geschieht nur für Videos und nur in Chrome. Bilder sind in Chrome OK. In allen anderen getesteten Browsern funktionieren Bilder und Videos einwandfrei.

Ich habe created a demo, die das falsche Verhalten zeigt:

Das Verhalten wie in diesem Bild (oben rechts) angezeigt werden soll.

Sie sehen den Effekt, wenn Sie die Größe des Browserfensters ändern. Bei großer Höhe und geringer Breite (sowie bei geringer Höhe und großer Breite) überlappen sich die Videos, was falsch ist. Die Bilder überlappen nicht und sind daher korrekt. für die Demo http://oi68.tinypic.com/x5b3vc.jpg http://oi68.tinypic.com/x5b3vc.jpg

Der Code -

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> 

:

Videos (mit dem Bären) sollte bei 50% Bildschirmbreite wie die Bilder (Bildschirmtestbilder) unterteilt werden

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%; 
} 

Wie kann das gelöst werden?

Answer 1

Ich hatte das gleiche Problem und löste es durch Hinzufügen overflow:hidden; zu meinem Container Div. Versuchen Sie, es zu Ihrer Containerklasse hinzuzufügen, und es sollte gut funktionieren.