Responsive object-fit: cover Update auf Chrome

Ich weiß, es gibt andere Fragen, über diese, aber Sie sind alt und nicht aktualisiert mit den aktuellen Browsern unterstützt. Und Sie sich nicht auf die Chrome bestimmtes problem mit diesem.

Ich wollen ein video (ich möchte das mit dem Bild auch, aber hier bin ich über ein video) zu besetzen 100% der Breite des Fensters, aber mit dem container eine begrenzte, festgelegte Höhe. Die Aufrechterhaltung der video Aspekt-Verhältnis (das ist sehr wichtig).

Grundsätzlich die object-fit: cover macht den job gut. Und in Safari funktioniert perfekt, das video-upscale/downscale in seinem container Aufrechterhaltung der Aspekt-ratio.

In Chrome, dass das auch passiert, aber es gibt keinen Respekt für die Höhe des Containers. Das element übertrifft die Höhe seiner container und weiter zu wachsen, um den Boden entsprechend der Fensterbreite.

object-fit: fill woks auch in beiden Browsern, aber das problem ist hier offensichtlich, das Aspekt-Verhältnis nicht eingehalten wird, so verformen Sie das video/Bild/usw.

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 machen das Werk perfekt Achtung die container-Höhe (oder zumindest min-height oder max-height), dementsprechend in allen Browsern, halten Sie das element, das Aspekt-Verhältnis?

Was ist deine konkrete Frage? Bitte klären Sie. Grüße,
Hinweis: Objekt-fit-funktioniert nicht im IE und nicht im Edge.
IE ist ziemlich irrelevant für mein Projekt, aber Edge nicht zu? Vielleicht gibt es etwas vergleichbares für dieses Problem lösen, oder vielleicht wird nicht unterstützt in der ersten version. Ich glaube nicht, dass die Objekt-fit-Eigenschaft irrelevant ist für die Zukunft von CSS. Meine Frage, wie kann ich dies leicht tun bleibt.

InformationsquelleAutor Peterson Cordeiro | 2015-06-08

  1. 26

    Habe ich Sie einfach auf diese selbst. Es sieht aus wie wenn Sie wickeln Sie Ihre video-element in einem div-und überlauf-set als versteckte, dann werde es umgehen, Chrome-bug, 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;
}

    Habe ich auch gerade gefunden, ein paar Fragen-Datei, die zu sein scheinen Abdeckung Chrome bug auf:

    Das ist wirklich interessant, es arbeitete zu überwinden Chrome problem. Sicherlich ist ein Fehler, die Sie lösen müssen. Danke.
    Ich habe das gleiche Problem, aber es ist nicht gelöst mit diesem code.

    InformationsquelleAutor Standard8

  2. 5

    Dies ist ein Chrom-rendering-bug (pro die Standard8 Antwort). Eine alternative Lösung ist, eine kleine border-radius ('0.5 px' verwendet werden, um den kleinsten Wert, der funktioniert, aber ich habe gerade getestet in Chrome 65 und '0.1 px' scheint zu funktionieren jetzt) auf das video-element. Dies zwingt das element nach unten eine andere (und offenbar weniger buggy) rendering-Pfad in der Chrome.

    Der Vorteil dieses Updates ist, dass es nicht erforderlich, einen "shrink-wrapped zuschneiden element" um das video. Der Nachteil ist, dass Kupieren zu einem leicht abgerundeten Rechteck ist wahrscheinlich etwas weniger performant als das Kupieren, um eine rect.

    InformationsquelleAutor podperson

Schreibe einen Kommentar