title: Proportionally scale a div with CSS based on max-width (similar to img scaling)
body: <p>Is it possible to proportionally scale a <code>div</code> like an <code>img</code> using only CSS?  Here is my first attempt: <a href="http://dabblet.com/gist/1783363">http://dabblet.com/gist/1783363</a></p>
  
  <h1>Example</h1>
  
  <pre><code>div {
   max-width:100px;
   max-height:50px;
  }
  img {
   max-width:100px;
   max-height:50px;
  }
  </code></pre>
  
  <h2>Actual Result</h2>
  
  <pre><code>Container: 200 x 100
  Div:       100 x 50
  Image:     100 x 50
  
  Container: 50  x 100
  Div:       50  x 50  // I want this to be 50x25, like the image
  Image:     50  x 25
  </code></pre>