Responsive Webdesign – Grundlagen

Responsive Images – picture

Testen Sie unsere 1924 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wenn je nach Viewport-Größe vollkommen unterschiedliche Bilder angezeigt werden sollen, sollten Sie das picture-Element einsetzen.

Transkript

Nicht immer sollen bei kleinem Viewport einfach nur verkleinerte Bilder angezeigt werden. Manchmal benötigen Sie eigenständige Bilder. Das ist dann ein Fall für das neue Picture-Element. Ein Beispiel sehen Sie auf der Web-Seite der Working Group für die responsiven Bilder. Wenn es mir um den Hund geht, dann kann ich auf einem Desktop trotzdem viel vom Hintergrund anzeigen lassen. Dieses Bild würde jedoch verkleinert auf einem Smartphone keine gute Figur machen, denn dann wäre der Hund einfach nur ein schwarzer Fleck. Und wenn es mir um diesen Hund geht, ist es natürlich besser den jeweiligen Ausschnitt zu zeigen. Sehen wir uns an wie das Picture-Element funktioniert. Das Picture-Element ist ein Container für 'img' und 'source'-Elemente. Das 'img'-Element funktioniert ganz normal. Sie können jetzt aber zusätzliche source-Elemente angeben und sagen: ab einer bestimmten Breite beispielsweise soll ein anderes Bild verwendet werden. Sehen wir uns das einmal an im Browser. Folgende Situation: ich habe hier einen Storch auf der Wiese. Und wenn ich das kleiner mache, dann würde man irgendwann nichts mehr vom dem Storch sehen. Da wähle ich jetzt wirklich an dieser Stelle das andere Bild, nämlich 'storch_klein.jpg' Wir haben uns in diesem Film die Verwendung des Picture-Elementes angesehen. Wichtig ist, dass Sie das nur verwenden, wenn Sie wirklich eigenständige Bilder für die verschiedenen Situationen bereitstellen wollen. Dann schreiben Sie als umfassendes Element das Picture-Element. Und in diesem Element geben Sie 'img' an und 'source'. Und bei 'source' bestimmen Sie über 'Media Query' wann dieses Bild gewählt werden soll.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!