CSS/Eigenschaften/object-fit

Browserunterstützung
caniuse.com

Die Eigenschaft object-fit gibt an, wie die Inhalte eines ersetzten Elements wie img oder video an die Box angepasst werden, die durch dessen verwendete Höhe und Breite erzeugt wird

Erlaubte Werte

• fill: (Standardwert) wird in der Größe angepasst, sodass die Inhaltsbox des Elements ausgefüllt wird, kann dabei im Seitenverhältnis verzerrt werden
• contain: wird angepasst, ohne dass die Seitenverhältnisse des Elements verändert werden
• cover: wird so in der Größe angepasst, dass es seine Inhaltsbox vollständig ausfüllt, ohne dabei sein Seitenverhältnis zu verlieren. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten.
• none: keine Anpassung
• scale-down: wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

fill

anwendbar auf

ersetzte Elemente

Vererbung

nein

animierbar

nein

Beispiel

.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}

 

Siehe auch

• Bilder im Internet
  • Bilder im Internet/Einbindung mit img
    Größenanpassung mit object-fit
  • Bilder im Internet/responsive Bilder mit picture
    Art Direction mit object-fit und object-position

Weblinks

• Spezifikation (W3C): Sizing Objects: theobject-fit property
• MDN: object-fit
• css-tricks: A Quick Overview of `object-fit` and `object-position`
• blog.kulturbanause: Die CSS-Eigenschaft »object-fit« – Flexible Grafiken im HTML-Markup
• Details: caniuse.com