Arbeiten mit Bildern in CSS

Wir wissen, dass Bilder eine entscheidende Rolle auf einer Webseite spielen. Sie helfen, Inhalte effektiv und klar darzustellen. Manchmal kann das Inhaltsbild eine Größe haben, die entweder größer oder kleiner als der dafür vorgesehene Container ist, oder das Seitenverhältnis kann sich vom Container unterscheiden. 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 berücksichtigen (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 das Bild beschneiden).
• none: Verwendet die Originalgröße des Bildes; das Bild 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;