Bilder mit der optimalen Größe anzeigen

[Jonas]

Hallo Leute,
ich habe da ein paar Bilder auf meiner Seite - von unterschiedlichster Auflösung (200x200 bis zu 2000x2000) - .
Die Bilder habe ich als "Vorschaubildchen" - also in geringer Höhe und Breite - eingebaut. Bei einem Klick auf eines der Bildchen lege ich mit Javascript einen schwarzen, aber durchsichtigen, Schleier über das ganze Dokument und darüber wiederum das angeklickte Bild in groß.
Nun weiß ich nicht wie ich es gestaltungsmäßig so hinbekomme dass die kleinen Bilder (200x200) als auch die großen Bilder (2000x2000) optimal dargestellt werden. Die größeren bekomme ich perfekt gestaltet mit: ~~~css img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
}

Dies sieht allerdings bei kleineren Bildern nicht so dolle aus wenn die dann auf 100% gestreckt werden.  
Gibt es eine bessere CSS Lösung die auflösungsunabhängig ein optimales Bild erzeugt? (Oder eine Javascript-Lösung? Immer her mit Ansätzen :)  
  
Grüße, Jonas