Bilder

Bilder sinnvoll skalieren

Ein <img> bringt von Haus aus seine eigene Pixelgröße mit. Die passt selten exakt ins Layout:

img {
  max-width: 100%;   /* nie breiter als der Container */
  height: auto;       /* Seitenverhältnis bleibt erhalten */
}

Bild exakt zuschneiden: `object-fit`

Manchmal soll ein Bild eine feste Größe haben (z.B. ein quadratisches Profilbild), ohne verzerrt zu werden:

.avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;    /* füllt die Box, schneidet Überstehendes ab */
  border-radius: 50%;
}

Wert	Verhalten
`fill` (Standard)	Bild wird verzerrt, um die Box exakt zu füllen
`cover`	Bild füllt die Box komplett, Seitenverhältnis bleibt - Ränder werden abgeschnitten
`contain`	Ganzes Bild bleibt sichtbar, ggf. mit Rand - Seitenverhältnis bleibt

Hintergrundbilder: `background-image`

Neben Farben kann jedes Element auch ein oder mehrere Hintergrundbilder bekommen, in einem webtauglichen Format (jpg, png, svg, …):

.hero {
  background-image: url("bilder/hero.jpg");
  background-repeat: no-repeat;   /* Standard: wird sonst gekachelt wiederholt */
  background-position: center;
  background-size: cover;         /* füllt die Box, ohne Verzerrung */
}

url(...) funktioniert genauso mit absoluten (url(https://example.com/bild.jpg)) wie relativen Pfaden
Ohne background-repeat: no-repeat wird ein kleines Bild automatisch horizontal und vertikal gekachelt