Bilder Proportionen beibehalten

[momo95]

Hallo,

ich erstelle gerade eine mobile Website in der auch Bilder vorhanden sein sollen. In der originalen Website sind die Bilder nicht mit Breite oder Höhe eingestellt, weil ich sie immer mit ps auf die richtige Größe verkleiner und diese Seite statisch ist (950px breit).

Nun ist die Breite der mobilen Website aber 100%. Logisch, dass dort manche Bilder bei einer Auflösung von z.B. 230px eine horzontale Srollleiste erzwingen. Darum habe ich am ende der css folgendes eingefügt:

img {
max-width: 100% !important;
}

Jetzt ist aber das Problem, dass die Bilder alle schön "schmal" sind und auch keine Scrollleiste erscheint, aber die Höhe passt sich nicht Proportional an. D.h. alle Bilder im Hochformat sind "gezogen" und alle Bilder im Querformat sind "gestaucht".

Wie kann ich auch die Höhe porpotional zur Breite verändern? evtl. mit hilfe js?

 

[sysop]

Mein Tip:
Mach Thumbnails. Bilder zu scalieren ist Ressourcen fressend, weil das Bild immer in der vollen Grösse geladen und dann erst verkleinert werden kann. Dein Mobilteil müsste eine 10MB grosse Datei erst laden und dann zu einem 100x100px Bild scalieren.
Besser man stellt die Bilder in der richtigen Grösse zur Verfügung.

PHP-Thumbnail Ersteller gibt es zu Hauf, die dein Bild nach dem Upload gleich auf die richtige Grösse anpassen.