1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. Skalieren wie ein Profi mit CSS Object Fit für Bilder, Videos und Co.

Skalieren wie ein Profi mit CSS Object Fit für Bilder, Videos und Co.

css-object-fit

Skalieren wie ein Profi mit CSS Object Fit für Bilder, Videos und Co.

Seine eigene Webseite zu erstellen, ist nicht immer leicht. Um Abhilfe beim Programmieren am Laptop oder PC zu schaffen, gibt es Eingabebefehle wie CSS Object Fit, die Dir einiges erleichtern können. Alles Wissenswerte zu diesem Thema haben wir Dir daher in diesem Beitrag zusammengefasst.

CSS Object Fit: Was das ist

Bei CSS Object Fit handelt es sich um einen Eingabebefehl, dessen man sich in der Arbeit mit CSS bedient. Er ermöglicht es angehenden Entwicklern, Bilder und andere Objekte (zum Beispiel Videos) auf eine Weise zu skalieren, dass sie genau in den vorgegebenen Rahmen passen, zum Beispiel direkt nach der Bearbeitung von diesen Elementen.

Man verwendet CSS Object Fit für eine Vielzahl von Zwecken – von der Größen- und Positionsanpassung von Bildern auf einer Webseite bis hin zur Erstellung von responsiven Design-Layouts.

Verwendung von CSS Object Fit

CSS Object Fit funktioniert durch die Verwendung von verschiedenen Skalierungs- und Positionierungsregeln, die man anpassen kann, um das jeweils gewünschte Ergebnis zu erzielen.

So gibt es mehrere grundlegende Eigenschaften, die man dahingehend nutzen kann: „fill“ (ausgefüllt), „contain“ (eingedämmt), „cover“ (gedeckt), „none“ (keine) und „scale-down“ (verkleinert).

  • „fill“ bedeutet, dass das Objekt in seiner vollständigen Größe angezeigt wird. Sollte es nicht mit dem vorgegebenen Aspect Ratio übereinstimmen, streckt man es auf die jeweiligen Seitenverhältnisse – man füllt sie aus.
  • „contain“ meint die Skalierung des Objektes insoweit, dass es vollständig in den vorgegebenen Aspect Ratio passt. Zwar behält man die Seitenverhältnisse bei, doch sollte diese auf das neue Format nicht passen, kommt das sogenannte Letterboxing zum Einsatz.
  • Durch „cover“ skaliert man das Objekt soweit, dass es den vorgegebenen Rahmen ausfüllt. Entsprechende Zuschneidungen sind möglich.
  • „none“ heißt, dass das Objekt im Originalzustand und ohne Skalierung angezeigt wird.
  • Mithilfe von „scale-down“ ist man in der Lage, das Objekt später wie mit „none“ oder „contain“ anzuzeigen. Hierbei ausschlaggebend ist, was später beim Anzeigen auf der Webseite besser passt bzw. zu einer genaueren Angabe der Maßverhältnisse führt.

Zum Beispiel sähe ein Bild, welches man mithilfe der contain-Eigenschaft entsprechend auf seiner Webseite anpassen möchte, im CSS-Code wie folgt aus:

object-fit: contain;

In der Regel schreibt man es direkt hinter die entsprechende Bildbeschreibung, bei der man unter anderem noch Bildmaße und Ähnliches angibt (zum Beispiel: width, height, etc.).

Für die Anpassung eines Videoformates geht man ähnlich vor. Hierbei schreibt man es lediglich hinter die Videobeschreibung im CSS-Code.

Kleine Randnotiz vor diesem Hintergrund: Man kann den Eingabebefehl von CSS Object Fit auch in HTML nutzen.

Außerdem kann man den Object Fit nutzen, um Objekte zu direkt positionieren bzw. an einer bestimmten Position im Rahmen auszurichten. Dies geschieht über den Eingabebefehl object-position. Man kann es auf verschiedene Arten und Weisen mit Werten angeben. Zum Beispiel…

  • durch die Angabe durch Positionseigenschaften, einschließlich „center“ (mittig), „top“ (oben), „bottom“ (unten), „left“ (links), „right“ (rechts) und Variationen davon.
  • mithilfe von Pixelangaben (px).
  • durch die Angabe von Prozenten (%).
  • mithilfe von Längenangaben, darunter unter anderem Zentimeter (cm), Charrière (ch) oder Ems (em).

Vorteile von CSS Object Fit

In verschiedenen Situationen kann Object Fit sehr nützlich sein. Zum Beispiel…

  • um Bilder auf einer Webseite zu skalieren und anzupassen, ohne dass man die Seitenverhältnisse ändert.
  • damit man ein responsives Design erstellt, indem man verschiedene Versionen eines Bildes für verschiedene Bildschirmgrößen skaliert.
  • um Elemente wie Bilder auf verschiedenen Geräten anzuzeigen, ohne dass man eine einzelne Version des Bildes für jedes Gerät erstellen muss.

Auf einen Blick

Um Elemente auf einer Webseite entsprechend zu skalieren, nutzt man in der Regel CSS Object Fit. Er bietet allerlei Vorteile, darunter: die Anpassung der Objekte ohne Änderung an den Seitenverhältnissen und dadurch eine erhöhte Benutzerfreundlichkeit auf unterschiedlichen Geräten.

Wie kann ein Element mit Object Fit angepasst werden? Durch folgende Eigenschaften: fill, cover, contain, none und scale-down. Weiterhin kann in diesem Zusammenhang die Positionierung des Elementes mithilfe des Eingabebefehls object-position geändert werden.

FAQ zu CSS Object Fit

Was bedeutet object-fit?

Mithilfe dieses Eingabebefehls gibt man die Skalierungsart eines bestimmten Elementes – zum Beispiel eines Bildes – an.

Kann ich object-fit in DIV verwenden?

Die Verwendung dieses Eingabebefehls in DIV ist umsetzbar. Die Eingabe erfolgt innerhalb des entsprechenden DIV-Tags.

Kann ich object-fit: contain nutzen?

Möglich ist das, ja – nicht nur für Videos, sondern auch für Bilder.

Ähnliche Beiträge