Responsive Object-Fit: Abdeckung fix auf Chrome

Question

Ich weiß, es gibt andere Fragen dazu, aber sie sind alt und nicht mit der aktuellen Unterstützung des Browsers aktualisiert. Und damit decken sie das Chrome-Problem nicht ab.

Ich möchte ein Video (ich möchte das mit Bild auch tun, aber hier verwende ich ein Video) besetzen 100% der Breite des Fensters, aber mit dem Container mit einer begrenzten, angegebenen Höhe. Das Seitenverhältnis des Videos beibehalten (was sehr wichtig ist).

Grundsätzlich macht die object-fit: cover den Job hier gut. Und in Safari funktioniert perfekt, das Video upscale/in seinem Container unter Beibehaltung des Seitenverhältnisses.

In Chrome passiert das auch, aber es gibt keinen Respekt für die Höhe des Containers. Das Element übertrifft die Höhe seines Containers und wächst entsprechend der Fensterbreite immer weiter nach unten.

object-fit: fill funktioniert gut in beiden Browsern, aber das Problem ist hier offensichtlich, das Seitenverhältnis wird nicht respektiert, das Video/Bild/etc deformiert.

Hier ist, was ich habe:

HTML

<video preload autoplay loop poster="poster.jpg" id="bgvid"> 
    <source src="image/video.mp4" type="video/mp4"> 
</video> 

CSS

#bgvid { 
    width: 100%; 
    min-width: 100%; 
    height: 445px; 
    max-height: 445px; 
    background-color: #f0f0f0; 
    object-fit: cover; /* cover works perfectly on Safari */ 
} 

Meine Frage ist, wie kann ich diese Arbeit perfekt die Behälterhöhe zu respektieren (oder zumindest min-height oder max-height), responsiv in allen Browsern, unter Beibehaltung des Seitenverhältnisses des Elements?

---

Answer 1

Ich habe gerade selbst getroffen. Es sieht aus wie wenn Sie Ihre Video-Element in einem div und setzen Überlauf als versteckte wickeln, dann wird es um Chrome Bug arbeiten, also so etwas wie:

<div class="wrapper"> 
    <video preload autoplay loop poster="poster.jpg" id="bgvid"> 
    <source src="image/video.mp4" type="video/mp4"> 
    </video> 
</div> 

mit css

#bgvid { 
    width: 100%; 
    height: 100%; 
    background-color: #f0f0f0; 
    object-fit: cover; /* cover works perfectly on Safari */ 
} 

.wrapper { 
    width: 100%; 
    min-width: 100%; 
    height: 445px; 
    max-height: 445px; 
    overflow: hidden; 
} 

Ich habe auch gefunden, nur ein paar Probleme Datei, die auf diese zu bedecken Chrome Fehler scheinen:

• https://code.google.com/p/chromium/issues/detail?id=400829
• https://code.google.com/p/chromium/issues/detail?id=441890