Operas Object-fit: CSS-Eigenschaft für clientseitige Bildausrichtung und -beschneidung

Opera ist bekanntermaßen ein Browser mit sehr geringer Verbreitung. Darum ist es auch wenig sinnvoll, CSS-Eigenschaften einzusetzen, die ausschließlich vom norwegischen Browser unterstützt werden. Allerdings ist die „object-fit“-Eigenschaft eine schöne Idee für bessere Bildausrichtung sowie -beschneidung, weshalb es sich lohnt, sie sich einmal anzuschauen.

In der Regel werden Bilder ja entweder mit einer externen Bildbearbeitung oder serverseitig passend zurechtskaliert und -beschnitten. Die „object-fit“-Eigenschaft ermöglicht es jedoch, clientseitig ein Bild innerhalb eines Bildelementes mit fester Größe zu beschneiden und auszurichten.

Bilder beschneiden

Wird einem IMG-Element eine Höhen- und Breitenangabe zugewiesen, deren Seitenverhältnis nicht dem des Bildes entspricht, skaliert es normalerweise so, dass es in die angegebene Bildfläche passt – mit der Konsequenz, dass das Bild verzerrt und nicht mehr proportional angezeigt wird. Mit der „object-fit“-Eigenschaft hingegen, wird das Bild so beschnitten, dass das Seitenverhältnis erhalten bleibt:

img {
  object-fit: contain;
}

Mit dem Wert „contain“ wird erreicht, dass das Bild immer vollständig in der definierten Bildfläche angezeigt wird. Entsprechen die Proportionen des Bildes nicht denen des IMG-Elementes, wird oben und unten, beziehungsweise links und rechts, Freiraum gelassen.

Rechteckiges Bild in einem quadratischen Bildelement: ohne „object-fit“, mit „object-fit: contain“ und mit „object-fit: cover“

Alternativ gibt es die Möglichkeit, das Bild immer so darzustellen, dass es den gesamten Raum des IMG-Elementes einnimmt:

img {
  object-fit: cover;
  overflow: hidden;
}

Der Wert „cover“ sorgt zunächst dafür, dass das Bild nicht kleiner als die zur Verfügung stehende Fläche des IMG-Elementes dargestellt wird und bei ungleichen Proportionen links und rechts beziehungsweise oben und unten das Bild aus dem Rahmen hinausragt. Mit der Eigenschaft „overflow“ wird der herausragende Bildteil versteckt.

Bilder ausrichten

Neben der Eigenschaft „object-fit“ ermöglicht die Eigenschaft „object-position“ die Ausrichtung des Bildausschnittes innerhalb des Bildelementes. Normalerweise wird ein Bild horizontal und vertikal zentriert dargestellt. Mit „object-position“ lässt sich der Bildausschnitt auch links oder rechts, beziehungsweise oben oder unten ausrichten:

img {
  object-fit: cover;
  object-position: top right;
  overflow: hidden;
}

Erlaubt sind zwei Werte – je einer für die horizontale und vertikale Ausrichtung. Die Eigenschaft funktioniert ähnlich wie „background-position“ bei Hintergrundbildern.

Rechteckiges Bild in einem quadratischen Bildelement: mit „object-position: top left“, ohne „object-position“ und mit „object-position: top right“

Fazit: Eine schöne Sache, die derzeit leider nur von Opera unterstützt wird, weshalb auch mit Vendor-Präfixen („-o-object-fit“ und „-o-object-position“) gearbeitet werden muss. Wenn man ehrlich zu sich selbst ist, sollte man die Unterstützung durch andere Browser nicht so bald erwarten.

(dpe)