Skip to main content
Für Bilder sind vor allem die Properties max-width und object-fit wichtig. max-width ist nützlich, um bei grossen Bildern der Overflow zu entfernen. 
img {
  display: block;
  max-width: 100%;
}
Bei der Verwendung von object-fit kann das Bild auf verschiedene Weise dimensioniert werden, um in eine Box zu passen. Dabei kann object-fit die drei folgenden Werte annehmen:
  • cover: Verkleinert das Bild und behält die Seitenverhältnisse bei, sodass das Bild perfekt in die Box passt
  • contain: Bild wird so lange verkleinert, bis es klein genug ist, um in die Box zu passen
  • fill: Füllt die Box komplett mit dem Bild, behält jedoch nicht die Seitenverhältnisse bei.
Weitere nützliche Properties für das generelle Styling von Bildern findest du im folgenden Video: Video Styling von Bildern