Responsive Bilder
Das Ziel responsiver Bilder ist, dass sie auf allen Geräten korrekt angezeigt werden, egal ob auf Mobiltelefonen, Tablets oder großen Monitoren.
Grundmethode: max-width und height
Die häufigste Lösung ist, die Breite von Bildern mit max-width: 100% und height: auto an das Elternelement anzupassen.
Im folgenden Beispiel wird gezeigt, wie ein einfaches Bild mit CSS-Einstellungen responsiv wird.
Fortgeschrittene Lösung: picture und source
Mit den Elementen picture und source lassen sich verschiedene Bilder für unterschiedliche Bildschirmgrößen oder Auflösungen laden.
Vergleich der Methoden für responsive Bilder
Es gibt verschiedene Techniken für die Handhabung responsiver Bilder. Die folgende Tabelle fasst die gebräuchlichsten Methoden zusammen.
| Methode | Beschreibung |
|---|---|
| max-width | Das Bild passt sich automatisch an den Container an. |
| picture + source | Wir können unterschiedliche Bilder für verschiedene Bildschirmgrößen angeben. |
| srcset attribútum | Der Browser wählt automatisch das passende Bild aus den angegebenen Quellen aus. |
Tipps für responsive Bilder
Einige hilfreiche Tipps zur richtigen Anwendung responsiver Bilder:
- Optimiere die Bildgrößen immer für schnelles Laden.
- Verwende moderne Formate wie WebP für kleinere Dateigrößen.
- Teste die Bilder auf verschiedenen Geräten und Auflösungen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
