Objektanpassung - CSS-Tricks | CSS-Almanach 2025

Die object-fitEigenschaft definiert, wie ein Element auf die Höhe und Breite seines Inhaltsfelds reagiert. Es ist für Bilder, Videos und andere einbettbare Medienformate in Verbindung mit der object-positionEigenschaft vorgesehen. Mit object-fitdieser Option können wir ein Inline-Bild zuschneiden, indem wir genau steuern, wie es in seiner Box zerquetscht und sich ausdehnt.

object-fit kann mit einem dieser fünf Werte eingestellt werden:

fill: Dies ist der Standardwert, mit dem das Bild unabhängig vom Seitenverhältnis an das Inhaltsfeld angepasst wird.
contain: Vergrößert oder verkleinert das Bild, um das Feld zu füllen und gleichzeitig das Seitenverhältnis beizubehalten.
cover: Das Bild füllt die Höhe und Breite des Felds aus, wobei das Seitenverhältnis wieder beibehalten wird, das Bild dabei jedoch häufig beschnitten wird.
none: image ignoriert die Höhe und Breite des übergeordneten Elements und behält seine ursprüngliche Größe bei.
scale-down: Das Bild vergleicht den Unterschied zwischen noneund contain, um die kleinste konkrete Objektgröße zu ermitteln.

So können wir diese Eigenschaft festlegen:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Da das zweite Bild ein anderes Seitenverhältnis als das Originalbild auf der linken Seite hat, erstreckt es sich außerhalb des Bereichs des Inhaltsfelds und schneidet den oberen und unteren Teil des Bildes zu.

Es ist erwähnenswert, dass das Bild standardmäßig in seinem Inhaltsfeld zentriert ist, dies kann jedoch mit der object-positionEigenschaft geändert werden .

Demo

Die folgende Demo zeigt fünf Beispiele, in denen detailliert beschrieben wird, wie ein Bild in ein Inhaltsfeld gequetscht werden soll, das manchmal kleiner oder größer als seine ursprüngliche Breite ist (ändern Sie die Größe des Browsers, um eine bessere Vorstellung davon zu erhalten, wie dies funktionieren könnte):

Sehen Sie sich die Pen-Objektanpassung von Robin Rendle (@robinrendle) auf CodePen an.

Wenn der Inhalt des Bildes aus irgendeinem Grund das Inhaltsfeld nicht ausfüllt, zeigt der nicht ausgefüllte Bereich den Hintergrund des Elements an, in diesem Fall einen hellgrauen Hintergrund.

Browser-Unterstützung

Es ist erwähnenswert, dass iOS 8-9.3 und Safari 7-9.1 die object-fitEigenschaft sind, aber nicht object-position.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.