Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

CSS object-fit – Flexible Grafiken im HTML-Markup

Mit der CSS-Eigenschaft object-fit lassen sich Bilder und Videos, die im HTML-Markup liegen zentrieren und zuschneiden. Die CSS-Eigenschaft background-size, für die Positionierung von CSS-Hintergrundbildern dürfte jedem soweit ein Begriff sein. Mit der Eigenschaft object-fit ist diese Positionierung auch mit Grafiken und Videos, die im HTML-Code liegen möglich.

Die Syntax

Für die CSS-Eigenschaft object-fit gibt es fünf verschiedene Werte, die dem Element übergeben werden können, um es an seiner Content-Box auszurichten.

fill
Das Element wird so in der Größe angepasst, dass es das seine Content-Box ausfüllt. Das Element wird hierbei im Seitenverhältnis verzerrt.
contain
Das Element wird anhand seiner Content-Box angepasst, ohne dass die Seitenverhältnisse des Elements verändert werden.
cover
Das Element wird so in der Größe angepasst, dass es seine Content-Box vollständig ausfüllt ohne dabei sein Seitenverhältnis zu verlieren. Es wird folglich zugeschnitten, sofern das Seitenverhältnis nicht zufällig übereinstimmt.
none
Das Element wird in der Größe nicht an seine Content-Box angepasst. Die Größe wird durch den Standardalgorithmus zur Größenanpassung bestimmt.
scale-down
Das Element wird in der Größe so angepasst, als ob none oder contain angegeben wären – je nachdem welcher Wert eine kleinere Größe ergeben würde.

object-fit anwenden

Angewendet wird die object-fit-Eigenschaft direkt auf das Bild bzw. Video.

img {
  object-fit: cover;
}

Das Element richtet sich dann an seiner eigenen Content-Box aus. Seht euch dazu auch das folgende Beispiel an:

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the object-fit feature across the major browsers from caniuse.com

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 4 Kommentare

  1. Webdesign Equinoxe Freiburg
    schrieb am 18.02.2016 um 11:30 Uhr:

    Und noch was neues für mich. Muss hier wohl doch mal öfters vorbeischauen! Danke für die sehr informativen Artikel…
    Schade natürlich nur, dass der IE mal wieder Probleme macht :-(

    Antworten
  2. Chris
    schrieb am 26.08.2015 um 13:05 Uhr:

    Egal welches HTML / CSS Thema man googelt, man landet immer hier -> nicht schlecht.

    Als Anreiz zu deinen Artikeln, insbesondere die CSS3 Artikel, wäre es doch recht hilfreich direkt eine Browsersupport-Markierung in Form von Icons o.ä. zu zeigen.

    In der Praxis sieht es nämlich doch recht schnell düster aus mit den vielen, schönen CSS3 Angaben da der Support des IE’s (Edge) doch weiterhin recht bescheiden ist.

    Gruß Chris

    Antworten
    • Jonas Hellwig
      schrieb am 26.08.2015 um 13:33 Uhr:

      Hallo Chris, vielen Dank für dein Feedback. Das mit dem Browser-Support steht bereits auf der ToDo-Liste. Ich meine es gab mal eine Schnittstelle zu caniuse.com, aber ich finde sie nicht wieder. Wir arbeiten dran ;)

      Antworten
  3. Raffy
    schrieb am 10.08.2015 um 11:23 Uhr:

    Lange nicht mehr hier vorbeigeschaut, hat sich aber mal wieder gelohnt. object-fit kannte ich noch nicht.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →