Grafik skalieren mit Prozentangaben max-height max-widht

[kapuzino]

Ahoi

Die Aufgabe erschien mir so naheliegend, banal und alltäglich: Man läßt eine Galerie laufen mit Bildern im Hoch- und Querformat und möchte, dass beide Formate sich unverzerrt in einen, z.B. quadratischen Bereich maximal einpassen, ohne dass Scrollbalken entstehen.
Dennoch scheint es keine Lösung dafür zu geben, oder ?

Nun klingen die Angaben max-width und max-height genau wie das Gesuchte.
Max-width im IMG-Tag weist das Bild in die Schranken (Firefox 3.5), max-height jedoch nicht. (Testweise im IE6 geht natürlich keins von beiden.)

Kann man mit Doctypes was dran drehen ? Ein paar hab ich versucht, geht aber jedesmal irgendwas nicht.

Weiß jemand eine Lösung (ohne JS) oder kann definitiv sagen: geht nicht. Dann spar ich mir die weitere Suche.

[Gunnar Bittersmann]

@@kapuzino:

nuqneH

Max-width im IMG-Tag weist das Bild in die Schranken (Firefox 3.5), max-height jedoch nicht.

Wie kommst du zu diesem Trugschluss?

(Testweise im IE6 geht natürlich keins von beiden.)

Da ließe sich mit CSS-Expressions nachhelfen:

* html img  
{  
  width: expression( [code lang=javascript](new Function('elem', 'elem.style.width = (elem.width > elem.height) ? "42px" : "auto";'))(this)
~~~ );  
  height: expression( `(new Function('elem', 'elem.style.height = (elem.width > elem.height) ? "auto" : "42px";'))(this)`{:.language-javascript} );  
}[/code]  
  
  

> Weiß jemand eine Lösung (ohne JS)  
  
Für IE < 7? Passe. Auch [egal](http://forum.de.selfhtml.org/archiv/2009/9/t190331/#m1268411).  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)