kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Die CSS-Eigenschaft »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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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

Der Browser-Support ist zum Veröffentlichungszeitpunkt dieses Beitrags gut, allerdings unübersichtlich. Chrome, Firefox und Opera unterstützen die Eigenschaft ohne Präfix. Safari benötigt einen Präfix. Der Internet Explorer unterstützt die Eigenschaft nicht, aber es existiert ein Polyfill.

Den exakten Browser-Support entnehmt ihr bitte der Website Caniuse.

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

4 Kommentare

  1. Raffy

    Verfasst am 10. August 2015 um 11:23 Uhr.

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

  2. Chris

    Verfasst am 26. August 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

    • Jonas Hellwig

      Verfasst am 26. August 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 ;)

  3. Webdesign Equinoxe Freiburg

    Verfasst am 18. Februar 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 :-(

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.