Comment puis-je faire côte à côte des images d'égale hauteur (CSS/HTML)?

Deux images, l'une est 300x400 pixels (hauteur x largeur), l'autre est 500x600. Comment puis-je faire apparaître côte à côte, à l'échelle de sorte qu'ils sont de la même hauteur sur l'écran, qui occupe toute la largeur de la page (ou conteneur/div), sans changer le ratio d'aspect de l'image?

J'aimerais HTML/CSS façon de le faire -- quelque chose qui fonctionne depuis plus de 2 images si possible. Actuellement, je calculer manuellement la largeur de chaque image (en mathématiques ci-dessous).

EDIT:

Un exemple de ce que je suis en train de faire:

<img src="http://stackoverflow.com/content/img/so/logo.png"
     width="79%" style="float:left" border=1 />
<img src="http://stackoverflow.com/content/img/so/vote-favorite-off.png"
     width="20%" border=1 />

Utilisé la formule ci-dessous (ou d'essai et d'erreur) à venir avec 79/20 split. Notez que 79 + 20 < 100 -- si je l'ai mis à 80/20 puis, les images enveloppe due à la frontière. Comment puis-je le faire sans avoir à faire n'importe quel calcul? Le navigateur doit être en mesure de le faire pour moi.

ah1 = 300 //actual height of image 1
aw1 = 400 //actual width of image 1
ah2 = 500 //actual height of image 2
aw2 = 600 //actual width of image 2

//need to calculate these:
dw1 //display width of image 1, expressed as percent
dw2 //display width of image 2, expressed as percent
dw1 + dw2 == 100%

s1 = dw1 / aw1 //scale of image 1 (how much it has been shrunk)
s2 = dw2 / aw2

dh1 = ah1 * s1 //display height of image 1 = its actual height * its scale factor
dh2 = ah2 * s2

//need to solve this equality to get equal display heights:
            dh1 == dh2
       s1 * ah1 == s2 * ah2
dw1 / aw1 * ah1 == dw2 / aw2 * ah2
dw1 / aw1 * ah1 == (1 - dw1) / aw2 * ah2
dw1 * aw2 * ah1 == (1 - dw1) * aw1 * ah2
dw1 * aw2 * ah1 == aw1 * ah2 - aw1 * ah2 * dw1
dw1 * aw2 * ah1 + aw1 * ah2 * dw1 == aw1 * ah2
dw1 * (aw2 * ah1 + aw1 * ah2) == aw1 * ah2
dw1 == aw1 * ah2 / (aw2 * ah1 + aw1 * ah2)
    == 400 * 500 / (600 * 300 + 400 * 500)
    == 20 / (18 + 20)
    == 20 / 38
    == 52.63% //which ends up as style="width:53%" which isn't quite right...

OriginalL'auteur Dan | 2009-07-23