CSS/Eigenschaften/object-fit

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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
  • Defaultwert: fill
anwendbar auf ersetzte Elemente (Unterschied Tag Element Attribut)
Browsersupport Details: caniuse.com
Vererbung nein
animierbar nein
Beispiel
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
 


Weblinks

Siehe auch