max-width; max-height funzt net

[Hopsel]

Hi Torge!

Das muss doch irgendwie möglich sein... - oder?

Einfache Antwort: Nö!

Detailliertere Antwort: Bedingt!
;-)

Im Firefox 3.0.4 (und Safari 3.1.2 übrigens auch) funktioniert der Einsatz von max-width und -height mit 100%, wenn das Elternelement eine absolute Breite bekommt. Das Bild wird unverzerrt, aber skaliert dargestellt, egal ob es in der Breite oder in der Höhe eine größere Ausdehnung hat.

Allerdings wirst du den Internetexplorer nicht überreden können.

Die einzige sichere Möglichkeit, die ich sehe ist der Einsatz einer serverseitigen Technik, die bewertet, welche Dimensionen das Bild hat und eine entsprechende Höhe (exklusiv-) oder Breite für das Bild festlegt.
Das würde ich über entsprechende Klassen festlegen, die den Bildern nur noch zugewiesen werden müssen:

.max-width { /* für Bilder mit Breite >= Höhe */  
width:100%;  
}  
  
.max-height { /* für Bilder mit Höhe >= Breite */  
height:100%;  
}

Mit Javascript kannst du die Klassen auch ohne vorherige serverseitige Verarbeitung zuweisen. Allerdings halt nicht sicher und unter allen Umständen. Dafür müsstest du alle Elemente des Elterndivs durchlaufen, ggf. prüfen, ob sie Bilder sind und dann eben die entsprechende Klasse zuweisen.

MfG H☼psel