Wir wissen, dass Bilder eine entscheidende Rolle auf einer Webseite spielen. Sie helfen, 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 sein Seitenverhältnis unterscheidet sich von dem des Containers. 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 so, dass es den Container vollständig ausfüllt, unabhängig vom Seitenverhältnis. Dies kann dazu führen, dass das Bild beschnitten oder verzerrt wird;
• contain skaliert das Bild so, dass es in den Container passt und das Seitenverhältnis beibehält. Dadurch kann um das Bild herum leerer Raum entstehen, wenn Container und Bild unterschiedliche Seitenverhältnisse haben;
• cover skaliert das Bild so, dass es den Container vollständig abdeckt und das Seitenverhältnis beibehält;
• none zeigt das Bild in seiner Originalgröße an, unabhängig von der Größe des Containers. Dies kann dazu führen, dass das Bild den Container überragt;
• scale-down verkleinert das Bild, um in den Container zu passen, wenn es größer als seine natürliche Größe ist, oder zeigt das Bild in seiner natürlichen Größe an, wenn es in den Container passt.

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;