Lädt...

Responsive Bilder mit CSS

Media Queries haben das Layout bei Viewport-Wechsel umgebaut. Bilder sind ein eigener Stresspunkt: eine 4000px breite Datei in einer schmalen Spalte läuft über, frisst Bandbreite oder lässt die Seite beim Laden springen. Diese Lektion behandelt fluides CSS, Platzreservierung und schlauere Quellen — ohne die @media-Syntax der vorherigen Lektion zu wiederholen.

Werkzeugkiste responsive Bilder

📊 Responsive Bilder auf einen Blick

Baustein Alltagsaufgabe
max-width: 100% + height: auto Bild skaliert in der Spalte runter; Seitenverhältnis bleibt
width / height am <img> oder aspect-ratio in CSS Reserviert Layout-Platz; weniger CLS beim Laden
srcset + sizes Browser wählt eine Dateibreite nahe der Darstellungsbreite
<picture> + <source media> Art Direction — anderer Crop oder Asset pro Bedingung
object-fit + feste Box Zuschneiden oder Letterbox in bekanntem Rahmen (Lektion Object Fit)
Media Queries am Layout Spalten und Nav verschieben — Bilder folgen der Slot-Breite

Zwei Ebenen: Layout-Breite (Container, Grid, Media Queries) und Bildverhalten (CSS-Skalierung + welche Datei geladen wird). Overflow zuerst mit CSS fixen; srcset ergänzen, wenn dasselbe Motiv auf dem Handy kleinere Dateien braucht.

Fluides Bild — max-width und height: auto

Der Klassiker: Das Bild soll den Container nicht sprengen und proportional bleiben.

Fluides Bild in einer Spalte

css 
.article img {
max-width: 100%;
height: auto;
display: block;
}

Nur width: 100% auf riesigen Intrinsic-Bildern ohne max-width wirkt manchmal trotzdem ungünstig. Kombinieren Sie fluide Regeln mit vernünftigen Quellen oder srcset, damit Handys keine Poster-JPEGs für Thumbnails laden.

Platz reservieren — Maße und aspect-ratio

Kennt der Browser Breite und Höhe früh, springt der Inhalt darunter weniger. In modernem CSS drücken Sie das Verhältnis direkt aus.

Seitenverhältnis am Hero

css 
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}

Für Inhaltsfotos, die voll sichtbar bleiben sollen, reicht fluides max-width ohne erzwungenes cover. aspect-ratio + object-fit: cover, wenn das Design einen festen Rahmen verlangt — Object Fit vertieft das; hier geht es um weniger Layout-Sprung bei Responsive.

Auflösungswechsel — srcset und sizes

srcset listet Kandidaten; sizes sagt, wie breit das Bild im Layout gerendert wird (nicht nur der Viewport). Der Browser wählt — Sie schreiben nicht für jede PNG-Breite einen @media-Block.

Srcset mit sizes-Hinweis

html 
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>

sizes ehrlich halten: volle Viewport-Breite mobil, halbe Container-Breite desktop — so formulieren. Falsche Hinweise → zu große oder zu weiche Dateien.

Art Direction mit <picture>

Wenn sich der Crop ändern soll — Portrait-Hero mobil, breites Banner desktop — <source> mit media (oder type für Formate) und ein Fallback-<img> mit alt.

Picture für verschiedene Crops

html 
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>

picture für Art Direction, nicht für fünfzig Breakpoint-Kopien. Oft reicht srcset, wenn nur die Auflösung wechselt. Mit fluide CSS oben kombinieren.

Feste Rahmen — kurze object-fit-Erinnerung

Fluide Inline-Fotos: max-width. Gleich hohe Kartenkacheln: feste Box + object-fit: cover — Object Fit gehört dorthin; nicht jedes Galeriebild mit fill strecken.

Karten-Thumb im responsiven Grid

css 
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}

Mit Media Queries arbeiten

Queries ändern Grid und Sidebar; Bilder erben die Slot-Breite. sizes anpassen, wenn ein Breakpoint die Render-Breite ändert. Sie ersetzen Queries nicht — Sie richten Bild-Hints am Layout aus.

Selbst ausprobieren

  1. Breites <img> in schmaler Spalte — Overflow mit max-width: 100% und height: auto beheben.
  2. width, height oder aspect-ratio am Hero — Layout-Sprung beobachten.
  3. srcset mit drei Breiten und realistischem sizes für Ihr Übungslayout.
  4. <picture> mit zwei Crops für schmal vs. breit.
  5. Feste Thumb-Höhe mit object-fit: cover im Karten-Grid — Unterschied zu Schritt 1 notieren.

Typische Fehler

  • Riesiges src ohne srcset — Mobile lädt Desktop-Poster
  • width: 100% ohne height: auto und verzerrte Fotos
  • sizes="100vw" überall, obwohl CSS 320px Sidebar-Bild rendert
  • object-fit ohne begrenzte Box
  • Hier @media-Syntax wiederholen statt Slot-Breite und sizes zu verknüpfen

Zusammenfassung

  • Fluides CSS (max-width: 100%, height: auto) hält Bilder in responsiven Spalten
  • Maße oder aspect-ratio reservieren Platz gegen Sprung
  • srcset/sizes optimieren welche Datei; <picture> für Art Direction
  • object-fit für feste Rahmen, nicht Standard für jedes Inline-Foto
  • Als Nächstes: Breakpoints — benannte Breiten und Query-Strategie für die ganze Seite

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 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
Thema 56 von 60
Css Tutorial