CSS/Eigenschaften/object-fit

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

• Spezifikation (W3C): Sizing Objects: theobject-fit property
• MDN: object-fit

Siehe auch

• CSS/Eigenschaften/Anzeige/object-fit
• HTML/Tutorials/responsive Webdesign/neuere HTML- und CSS-Features
  Art Direction mit object-fit und object-position