Responsive Webdesign – Grundlagen

Flüssige Bilder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bilder haben eine feste inhärente Breite. Das passt schlecht zu einem dynamischen Layout. Die einfachste Lösung besteht darin, die maximale Breite der Bilder zu beschränken.

Transkript

Was macht man aber mit Bildern, die eine vorgegebene Größe haben bei flüssigen Layouts? Die magische Formel lautet: max-width: 100% Aber sehen wir uns das einmal an. Wenn man Bilder braucht, ist es übrigens ganz praktisch hier diesen Dienst placehold.it zu verwenden. Da können Sie einfach ganz schnell solche Platzhalter-Bilder erzeugen, indem Sie einfach diese Url angeben und dahinter die gewünschte Größe. Und das habe ich jetzt hier einmal gemacht und in ein flüssiges Layout ein Bild von der Größe 600x100 eingebaut. Schauen wir uns mal an was dann passiert. Sie sehen: unschön, wenn ich das Browser- Fenster hier in irgendeiner Größe mache. Es gibt natürlich auch eine Größe, wo es passt. Aber wenn es kleiner wird, dann ragt das Bild einfach raus. Und schöner wird es natürlich auch nicht, wenn ich das dann bei sehr kleinem Viewport anschaue. Das heißt, ich muss dieses Bild jetzt auch flexibilisieren. Und das mache ich durch folgende Angabe. Ich habe sie hier schon mal auskommentiert. Ich gebe einfach an diesmal global für alle Bilder max-width: 100%. Damit sorge ich dafür, dass das Bild normalerweise seine Größe beibehält, dass es aber nie größer wird, als der Bereich, in dem es drinnen steht. Wenn wir das jetzt hier einmal aktualisieren, dann sehen Sie: das Bild schrumpft einfach bei Bedarf. Es passt sich immer an. Und das Ganze funktioniert natürlich auch bei kleinen Viewports. Das Bild passt sich immer an. Sie sehen natürlich hier auch sehr gut, dass man aufpassen muss, was für Inhalte man bei Bildern hat. Und so etwas wie Schrift sollte man natürlich normalerweise nicht auf Bildern integrieren, weil die einfach nicht gut damit skalieren und irgendwann unlesbar werden. Aber das vermeidet man sowieso heute. Also, Schrift bleibt möglichst immer Schrift, damit das Ganze gut zu lesen ist. Aber das hier ist eine sehr schöne Lösung für Bilder. Jetzt gibt es hier eine kleine Variante, nämlich folgender Fall. Angenommen, das kann ja auch sein, Sie haben beim Bild selber die Breitenangaben und Höhenangaben geschrieben. Also, ich habe das hier mal gemacht: 600 Breite, 100 Höhe. Ein zweites Bild, schauen wir uns mal an was mit diesem Bild hier passiert. Und dann sehen Sie folgendes. Das Bild verändert das zweite Bild hier mit den festen Breitenangaben im HTML-Code, verändert jetzt nur die Breite. Die Höhe hingegen bleibt immer konstant. Das wird in den meisten Fällen nicht gewünscht sein, weil das bedeutet ja auch wirklich, dass das Bild hier richtig-richtig verzerrt wird. Und die eine Möglichkeit wäre natürlich Breiten- und Höhenangaben hier rauszunehmen. Die andere Möglichkeit besteht dadrinnen, dass Sie an der Stelle, wo Sie schon max-width: 100% festgelegt haben, sich auch um die Höhe kümmern. Und damit die immer proportional skaliert, verwenden Sie height: auto. Können wir das jetzt hier einmal anwenden. Dann sehen Sie: es sind beide Bilder gleich, unabhängig davon, ob da jetzt die Breitenangaben im HTML-Code angegeben sind oder nicht. max-width: 100% sorgt also für flüssige Bilder. Und wenn die Bilder im Code, das heißt im HTML-Code eine Breiten-, Höhenangabe haben, benötigen Sie neben max-width: 100% auch noch height: auto, damit die Bilder nicht verzerrt werden.

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!