Unterschiede beim Vergrößern und Verkleinern von Bildern

[Ganane]

Hallo Selfer.

Angenommen ich habe ein Bild, das 600x400 Pixel groß ist.
Nun gebe ich diesem Bild die CSS Eigenschaft "width: 300px;". Sowohl bei Opera als auch bei Firefox und beim IE, wird das Bild auf eine Breite von 300 Pixeln verkleinert und die Höhe des Bildes wird dem Seitenverhältnis entsprechend angepasst also auf 200 Pixel verkleinert.

Soweit so gut.
Nun möchte ich zusätzlich, ein "max-height" angeben, sodass zu Hohe Bilder verkleinert werden. Nun verhalten sich alle drei Browser unterschiedlich.
Gebe ich für das obige Bild nun auch noch "max-height: 100px;" passiert folgendes:

Firefox skaliert das Bild auf eine Höhe von 100 Pixeln und belässt die Breite aber bei 300 Pixel. Das Bild wird also verzerrt.
Opera hingegen verkleinert die Höhe ebenfalls auf 100 Pixel, passt aber zusätzlich wieder die Breite des Bildes dem Seitenverhältnis entsprechend an, sodass das Bild nicht verzerrt aussieht und nicht mehr 400 Pixel breit ist.
Der IE schließlich kennt (zumindest laut http://www.css4you.de/) "max-width" überhaupt gar nicht.

Nun die Frage: Wie kann ich erreichen, dass sich Opera und der IE so wie Firefox verhalten? (ohne Javascript)

Wäre toll, wenn jemand da eine Idee hätte.

Gruß,
Ganane

[Ingo Turski]

Hi,

Gebe ich für das obige Bild nun auch noch "max-height: 100px;" passiert folgendes:

Firefox skaliert das Bild auf eine Höhe von 100 Pixeln und belässt die Breite aber bei 300 Pixel.

das ist wohl auch die korrekte Umsetzung, wenn Du die Breite angegeben hast. Probiere doch mal, auch die Breite über max-width zu setzen.

Der IE schließlich kennt (zumindest laut http://www.css4you.de/) "max-width" überhaupt gar nicht.

Ab Version 7 schon (außer Du schickst ihn in den quirks mode).

freundliche Grüße
Ingo