Ok, also was du eigentlich haben willst ist das Verhalten des CSS3 properties background-size:cover;, aber halt für normale <img> Elemente. Das geht ohne JavaScript meines Wissens nach nicht.
Wenn du eine CSS-only Lösung haben willst, kann ich momentan nur einen Kompromiss anbieten: http://jsfiddle.net/CSY48/3/
PHP-Code:
figure {
margin:0;
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
figure img {
position:absolute;
left:0; top:0; bottom:0; right:0;
margin:auto;
width:auto;
height:100%;
display:block;
}
Änderungen: overflow:hidden; auf den <figure> container, height:100%; für das <img>, keine max-width und max-height am <img>. Das hat dann den von dir gewünschten Effekt, so lange das Seitenverhältnis des Bildes in der Höhe kleiner ist, als das Seitenverhältnis des containers. Diese Lösung kommt aber auch nicht ohne JavaScript aus, da das Bild dann nicht zentriert wird.
Willst du jedoch wirklich das background-size:cover; Verhalten zu 100% haben, damit alle erdenklichen Bilder immer den container ausfüllen... dann musst du warten, bis ich die JavaScript Lösung dafür zusammengetüftelt habe oder du findest eine fertige Lösung sonst wo, oder jemand anders postet eine vorher 
.
// so, hier meine JavaScript Lösung: http://jsfiddle.net/CSY48/10/
// Anmerkung: die Lösung hat außerdem den Nachteil, dass man kurz das Bild in noch nicht veränderter Größe sieht, bis alle Resourcen auf der Seite geladen wurden - weil $(window).load(); benutzt wird, statt $(document).ready();. Falls deine Bilder alle eine width und height Angabe im html haben (wovon auszugehen ist), kannst du auch $(document).ready() stattdessen verwenden - dann tritt dieser Effekt nicht auf.
[Gelöst] dk_caroufredsel - Responsive Breite und feste Höhe
Zitieren
Zitat von jgrotstabel
Lesezeichen