CSS-Bildergalerie
Dropdowns verschachteln Menüs unter Links. Eine Bildergalerie ist ein anderes Bauteil: ein ruhiges Raster aus Thumbnails, das man überblicken kann. Gib den Thumbs dieselbe Größe, lass die Zeile umbrechen, schneide mit object-fit zu und überlasse tiefere responsive Grids den nächsten Flexbox- und Grid-Modulen.
Galerie-Werkzeugkasten
📊 Bildergalerie auf einen Blick
| Bauteil | Alltagsaufgabe |
|---|---|
| Galerie-Liste | Wrapper, der Thumbs in umbrechende Zeile oder Raster legt |
| Thumb-Größe | Gemeinsame Breite/Höhe für ein gleichmäßiges Set |
object-fit: cover |
Füllt die Thumb-Box ohne unschönes Strecken |
| Gap / margin | Luft zwischen den Bildern |
| Hover-Hinweis | Sanftes Feedback ohne Layout-Sprünge |
| Beschriftung | Optional figure/figcaption für Bedeutung |
Nutze echte <img>-Elemente mit sinnvollem alt-Text. Rein dekorative Sprites gehören woanders hin — Galerien sind meist Inhalt.
Umbrechende Flex-Galerie
Ein Flex-Container mit wrap macht aus einer Thumb-Liste eine responsive Zeile, die in die nächste Zeile fällt. Gap hält Abstände ehrlich.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Gemeinsame Thumb-Box + cover
Gib jedem Bild dieselbe Box, dann mit cover zuschneiden, damit Hoch- und Querformate einen Rhythmus teilen.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures und Beschriftungen
Wenn ein Label zählt, wickle das Bild in figure und füge figcaption hinzu. Halte den Caption-Text unter dem Thumb kurz.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Sanftes Hover-Feedback
Beim Hover leicht abdunkeln oder aufhellen. Vermeide riesige Scale-Transforms, die Nachbarn wegschieben, es sei denn, du planst Stacking bewusst.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Eine ruhige Galerie-Gewohnheit
Gleichmäßige Thumb-Boxen, wrap + gap, object-fit: cover, sinnvolles alt. Bevorzuge als Nächstes Flex/Grid-Lektionen für fortgeschrittene responsive Layouts — verwechsle das nicht mit Dropdown-Menüs.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Selbst ausprobieren
- Baue eine
.gallery-Flex-Wrap-Liste verlinkter Bilder. - Setze gemeinsame Breite/Höhe und
object-fit: cover. - Füge bei einem Eintrag
figure/figcaptionhinzu. - Gestalte sanftes Hover mit Opacity oder Outline.
- Schreibe einen Satz: Was lehrt Grid besser als dieser Wrap-Entwurf?
Typische Fehler
- Zufällige Höhen ohne gemeinsame Box oder object-fit
- Gap null, sodass Thumbs aneinanderkleben
- Galerien wie verschachtelte Dropdown-Menüs behandeln
- Jeden Thumb absolut in einen fragilen Stapel legen
- Leeres
altbei bedeutungsvollen Fotos
Zusammenfassung
- Galerien sind umbrechende Sets gleichmäßiger Thumbnails
- Gemeinsame Größe +
object-fit: coverhält den Rhythmus sauber - Flex wrap + gap ist ein ruhiges Einstiegs-Layout
- Captions und Hover-Hinweise bleiben optional und leicht
- Flexbox/Grid-Module vertiefen responsive Galerien als Nächstes
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt