Ein kurzer Überblick über `object-fit` und `object-position`

object-fit und object-position sind derzeit meine beiden Lieblings-CSS-Eigenschaften. Sie geben Entwicklern die Kontrolle über den Inhalt innerhalb eines img- oder video-Elements, ähnlich wie wir den Inhalt eines background mit background-position und background-size manipulieren können.

Zuerst tauchen wir in object-fit ein.

Diese Eigenschaft definiert, wie ein Element, wie z. B. ein img, auf die Breite und Höhe seiner Inhaltsbox reagiert. Mit object-fit können wir dem Inhalt mitteilen, diese Box auf verschiedene Arten auszufüllen, wie z. B. "behalte dieses Seitenverhältnis bei!" oder "strecke dich und nimm so viel Platz wie möglich ein!"

Hier ist ein Beispiel:

Dieses Bild ist 400px x 260px groß. Wenn wir dieses Bild so gestalten...

img {  
  width: 200px;
  height: 300px;
}

...dann erhalten wir eine unschöne Verzerrung, weil das Bild gequetscht wird, um in den Container zu passen.

Siehe den Stift 1b15cf30a6226d9f419b4f765458a059 von Robin Rendle (@robinrendle) auf CodePen.

Der Inhalt unseres img wird den gesamten verfügbaren Platz in seiner neuen Box einnehmen, die wir durch Ändern von Höhe und Breite erstellt haben, und zerstört dadurch sein ursprüngliches Seitenverhältnis.

Um das Seitenverhältnis des Bildes zu erhalten und gleichzeitig den Platz auszufüllen, können wir object-fit verwenden.

.cover {
  object-fit: cover;
}

Siehe den Stift 7080df9cb7158c0860b8a66db9667a7d von Robin Rendle (@robinrendle) auf CodePen.

Das Bild links ist unser Original und das Bild rechts hat die Seiten des Bildes abgeschnitten, wobei unser Seitenverhältnis nun erhalten bleibt! Das mag in diesem Maßstab keine besonders interessante Entwicklung sein, aber sobald wir uns mit realistischeren Interfaces beschäftigen, wird die Leistungsfähigkeit von object-fit offensichtlich.

Nehmen wir ein weiteres Beispiel.

Siehe den Stift WrBzey von CSS-Tricks (@css-tricks) auf CodePen.

Hier haben wir zwei Bilder und möchten, dass sie 50 % der Browserbreite (damit sie nebeneinander liegen) und 100 % der Höhe einnehmen. Das können wir mit Hilfe von Viewport-Einheiten tun.

img {
  height: 100vh;
  width: 50vw;
}

Das Problem ist, dass wir beim Ändern der Browsergröße das Seitenverhältnis der Bilder ändern, was zu allen möglichen Merkwürdigkeiten führen kann. Stattdessen möchten wir ihr Seitenverhältnis beibehalten, genau wie in der vorherigen Demo, und wir können genau die gleiche Methode verwenden, um dies zu tun. object-fit: cover zur Rettung!

Siehe den Stift YwbeoG von CSS-Tricks (@css-tricks) auf CodePen.

Versuchen Sie, den Browser erneut zu vergrößern. Keine Merkwürdigkeiten beim Seitenverhältnis, oder? Das ist auch außerordentlich hilfreich, wenn wir Bilder mit unterschiedlichen Abmessungen haben, da diese effektiv von ihrer Begrenzungsbox beschnitten werden.

cover ist nur einer von vielen Werten für object-fit, über die Sie im Almanac-Eintrag mehr erfahren können, aber bisher ist es der einzige Wert, der sich in der täglichen Interface-Entwicklung für mich als am nützlichsten erwiesen hat.

Kommen wir zu meiner nächsten Lieblingssache: object-position.

Wir richten die Dinge ein, indem wir dasselbe Bild wie zuvor verwenden und diese Stile anwenden.

img {  
  background: yellow;
  height: 180px;
  object-fit: none;
}

Zwei Dinge sind hier zu beachten: Wir müssen die Abmessungen für unser Bild deklarieren, damit object-position ordnungsgemäß funktioniert, und wir müssen object-fit auf none setzen, damit das Bild verschoben werden kann, anstatt die gesamte Box auszufüllen, wie es standardmäßig der Fall wäre. Dies ist etwas sinnvoller, wenn man bedenkt, dass der Standard für object-fit bei einem Bild fill ist, auch wenn man ihn nicht deklariert.

Apropos Standards: object-position zentriert alle Objekte horizontal und vertikal ohne Wert.

img {
  background: yellow;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%; /* even if we dont declare this the image will still be centered */
}

Der erste Wert verschiebt das Bild nach links oder rechts und der zweite verschiebt es nach oben oder unten. Wir können mit diesen Werten hier experimentieren.

Siehe den Stift Object position von Robin Rendle (@robinrendle) auf CodePen.

Wir können das Bild sogar innerhalb seiner Inhaltsbox verschieben, damit wir die zuvor festgelegte background-color sichtbar machen können.

Aber wie ist das nützlich? Gute Frage! Nun, in einem kürzlichen Projekt stellte ich fest, dass ein bestimmter Abschnitt eines Bildes zur Mitte verschoben werden musste, damit er die Aufmerksamkeit des Lesers erregte. Wir mussten kein neues Bild laden und hatten daher in diesem Fall kein <picture>-Element benötigt. Wir wollten das Bild nur ein wenig verschieben.

Abgesehen von der Verschiebung des Fokus eines Bildes bin ich mir nicht sicher, wofür diese Eigenschaft ansonsten praktisch nützlich sein könnte. Aber ich habe mit object-position herumgespielt, um zu zeigen, wie man Teile eines Bildes ausblenden und dann beim Klicken Teile davon wieder anzeigen kann, wie in dieser Demo

Siehe den Stift SVG sprite with object-position von Robin Rendle (@robinrendle) auf CodePen.

Ich habe nicht experimentiert, wie oder warum man dies für <video>-Elemente verwenden könnte. Vollbildvideos, die alle Ränder treffen, vielleicht? Es gibt noch viel mehr zu lernen und zu erforschen, wenn es um diese Eigenschaften geht.

Wie ist die Unterstützung?

Im Allgemeinen ziemlich gut!

object-fit wird von allem außer IE/Edge unterstützt. object-position wird hingegen von allem außer Safari und IE/Edge unterstützt.