title: Internet Explorer not honoring max-width or max-height
body: <p>I am trying to use CSS to scale my images to precise values:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="thumbnail-container"&gt;
      &lt;img src="sample-pic.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#thumbnail-container img {
      max-height: 230px;
      max-width: 200px;
  }
  </code></pre>
  
  <p>In this example, <code>sample-pic.jpg</code> is actually 320x211.</p>
  
  <p>In Firefox 11.0, this code works perfectly fine, and FF resizes <code>sample-pic.jpg</code> to the 230x211 max constraints set forth in the CSS rule.</p>
  
  <p>In IE 9, however, the <code>max-height</code> and <code>max-width</code> rules are completely ignored and the image renders as its usual 320x211 size.</p>
  
  <p><strong>How can I modify the HTML/CSS so that both IE 9 and FF 11.0 both honor these max constraints?</strong> Thanks in advance!</p>