Responsive Design Bilder automatisch anpassen

[Henry]

Hallo,

damit meine Webseite auch auf dem Handy das Design behält, müssten die Bilder entsprechen verkleinert werden. Das funktioniert bei Text ja offensichtlich automatisch, nur eben bei Bildern nicht.

Bei der Lösungssuche im Netz finde ich zumeist sowas wie:

img { height: auto; /* Falls Dimensionsangaben im HTML vorhanden sind */ max-width: 100%; }

Tja... das funktioniert zwar, nur leider auch umgekehrt, weil sich die Bildmaße bei entsprechenden Bildschirm auf mehr als 100% des Originalbildes vergrößern.

Klar, ich kann vorher die Bildabmessungen bestimmen und mit max-width deklarieren. Nur ist das, gerade bei vielen Bilddateien, sehr aufwendig und auch nicht wirklich variabel.

Daher... Gibt es eine einfache Lösung?

Falls nicht, dachte ich vielleicht kann CSS oder JS selbständig die jeweiligen Bildabmessungen variabel auslesen und anpassen, nur wie?

Gruss Henry