Bilder
Bilder brauchen Regeln: Sie sollen skalieren, den richtigen Ausschnitt zeigen und ohne Layout-Sprünge laden.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
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.
img {
max-width: 100%;
height: auto;
}
.thumbnail {
aspect-ratio: 16 / 9;
}Zuschnitt mit object-fit
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.
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}Hintergrundbilder
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.
.hero {
background-image: url("/bilder/stadt.jpg");
background-size: cover;
background-position: center;
}Vertiefung
Bilder ohne Layout-Sprung
Wenn Breite und Höhe fehlen, springt das Layout, sobald das Bild lädt. aspect-ratio reserviert den Platz schon vorher, max-width: 100% verhindert Überlauf.
object-fit: cover füllt eine feste Fläche und schneidet überstehende Teile ab. Für unterschiedliche Auflösungen nutzt du srcset und sizes, damit der Browser die passende Datei lädt.
.card__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}Merksatz: Platz reservieren, Seitenverhältnis festlegen, passenden Ausschnitt wählen. Bilder sollen das Layout nicht verschieben.
Übungsaufgabe
Bildkarte ohne Layout-Sprung
Baue eine Bildkarte mit 16:9-Fläche, Zuschnitt auf die Mitte und einem zweiten Bild, das per srcset eine größere Variante anbietet.
Das soll dein Programm können
- aspect-ratio für die Bildfläche
- object-fit: cover und object-position
- max-width: 100%
- srcset und sizes für das zweite Bild
- Alt-Text für beide Bilder
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
srcset="bild-800.avif 800w, bild-1600.avif 1600w" und sizes="(min-width: 48rem) 50vw, 100vw" beschreiben die Auswahl.
Lösung anzeigen
.card__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
border-radius: 0.75rem;
}
.card__hero {
max-width: 100%;
height: auto;
}
/* HTML:
<img class="card__hero"
src="bild-800.avif"
srcset="bild-800.avif 800w, bild-1600.avif 1600w"
sizes="(min-width: 48rem) 50vw, 100vw"
alt="Stadtansicht bei Sonnenuntergang">
*/Warum funktioniert das?
aspect-ratio reserviert die Fläche, object-fit bestimmt den Ausschnitt. srcset und sizes überlassen dem Browser die Wahl der passenden Datei.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.