Warum responsive Webdesign?
Unter responsive Webdesign versteht man die angepasste Ansicht einer Website auf unterschiedlichen Geräten wie zum Beispiel Smartphones und Tablets. Mehr Informationen dazu finden Sie auf https://de.wikipedia.org/wiki/Responsive_Webdesign .
Da die mobile Internetnutzung immer öfter angewandt wird, müssen Websites auch für Mobiltelefone optimiert werden. Es wird laufend an neuen Techniken gearbeitet, die eine Anpassung erleichtern. Bevor diese Techniken Einzug in alle Browser erhalten, müssen Techniken angewandt werden, die auch heute schon funktionieren.
Responsive Bilder erzeugen
Webseiten sollten sich der Darstellung anpassen. Dabei ist einiges zu beachten. In diesem Beispiel geht es darum, Bilder an die Auflösung des Gerätes anzupassen.
Bilder haben zunächst einmal eine fixe Größe. Sie haben immer eine feste Höhe und eine feste Breite. Standardmäßig wird ein Bild im HTML Code so eingefügt:
<img src =“Beispielbild.jpg“>.
Zur Größenangabe des Bildes wird die Eingabe ergänzt:
<img src =“Beispielbild.jpg“ width = „300“ height = „200“>
Dieses Bild ist nicht flexibel und muss im responsive Webdesign angepasst werden. Ein einfacher Weg, der in allen gängigen Webbrowsern funktioniert, wird mit CSS realisiert. Probieren Sie folgenden CSS Code aus:
bilder {
max-height: 100%;
width: 100% }
Der komplette Code für das Bild sieht dann so aus:
<img src =“Beispielbild.jpg“ class = bilder width = „300“ height = „200“>
Viel Spaß beim ausprobieren.