Bilder responsive einbinden

Bilder die man in die Webseite einbindet haben eine feste Breite und Höhe. Damit der Benutzer auf dem mobilen Endgerät nicht hin und her scrollen muss, ist es sinnvoll diese “responsive” zu machen. Zum Glück geht dies recht einfach mit etwas CSS:

img {
max-width: 100%;
height: auto;
}

Ist genug Platz vorhanden, werden die Bilder in der originalen Bildgröße angezeigt, aber nicht größer. Steht weniger Platz zur Verfügung werden die Bilder automatisch verkleiner.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert