Wir wissen, dass Bilder eine entscheidende Rolle auf einer Webseite spielen. Sie helfen dabei, Inhalte effektiv und klar darzustellen. Manchmal hat das Inhaltsbild eine Größe, die entweder größer oder kleiner als der dafür vorgesehene Container ist, oder das Seitenverhältnis unterscheidet sich vom Container. Wir betrachten, wie ein Bild am besten dargestellt werden kann.

object-fit

object-fit legt fest, wie ein Bild in seiner Größe angepasst werden soll, um in seinen Container zu passen.

object-fit: fill | contain | cover | none | scale-down;

• fill: Streckt das Bild, um den Container vollständig auszufüllen, ohne das Seitenverhältnis zu beachten (kann verzerren).;
• contain: Skaliert das Bild so, dass es in den Container passt und das Seitenverhältnis beibehält (es kann leerer Raum entstehen);
• cover: Füllt den Container vollständig aus und behält das Seitenverhältnis bei (kann zuschneiden);
• none: Verwendet die Originalgröße des Bildes; es kann den Container überlaufen;
• scale-down: Verwendet die kleinere Variante von none oder contain (entweder Originalgröße oder verkleinert, um zu passen).

object-position

object-position legt die Position des Bildes innerhalb seines Containers fest. Es akzeptiert zwei Werte: einen horizontalen und einen vertikalen Wert oder reservierte Schlüsselwörter.

object-position: x y;