title: How do I make side-by-side images equal height (CSS/HTML)?
body: <p>Two images, one is 300x400 pixels (height x width), the other is 500x600.  How can I make them appear side-by-side, scaled so they are the same height on screen, filling the whole width of the page (or container/div), without changing the aspect ratio of either image?</p>
  
  <p>I'd like an HTML/CSS way to do this -- something that works for more than 2 images as well if possible.  Currently I manually calculate the width of each image (math below).</p>
  
  <p><strong>EDIT:</strong><br />
  An example of what I'm trying to do:</p>
  
  <pre><code>&lt;img src="http://stackoverflow.com/content/img/so/logo.png"
       width="79%" style="float:left" border=1 /&gt;
  &lt;img src="http://stackoverflow.com/content/img/so/vote-favorite-off.png"
       width="20%" border=1 /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Used formula below (or trial and error) to come up with 79/20 split.  Note that 79 + 20 &lt; 100 -- if I set it to 80/20 then the images wrap due to the border.  How can I do this without having to do any computation?  The browser should be able to do it for me.</p>
  
  <pre><code>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...
  </code></pre>