CSS

Bilder

Bilder brauchen Regeln: Sie sollen skalieren, den richtigen Ausschnitt zeigen und ohne Layout-Sprünge laden.

Responsive Bilder

max-width: 100% und height: auto lassen Bilder mit ihrem Container schrumpfen.

aspect-ratio reserviert das Seitenverhältnis, bevor das Bild geladen ist, und verhindert Layout-Sprünge.

<max-width><aspect-ratio>

Flexibles Bild

img {
  max-width: 100%;
  height: auto;
}

.thumbnail {
  aspect-ratio: 16 / 9;
}

object-fit: cover füllt die Fläche und schneidet Überstand ab — ideal für Karten und Avatare.

object-fit: contain zeigt das ganze Bild und lässt gegebenenfalls Rand. object-position steuert den sichtbaren Ausschnitt.

Karten-Bild

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

background-image legt ein Bild hinter den Inhalt.

background-size: cover füllt die Fläche, background-position wählt den Ausschnitt, background-repeat steuert Kacheln.

<background-image><background-size><background-position>

Hero-Hintergrund

.hero {
  background-image: url("/bilder/stadt.jpg");
  background-size: cover;
  background-position: center;
}

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.