title: Proportionally resize horizontal unordered list menu made of images
body: <p>This is driving me crazy. I have an horizontal menu that is an <code>ul</code> with many <code>li</code> elements inside. The <code>li</code> elements contain <code>img</code> elements that are links. I want the menu to be as wide as possible, proportionally maintaining its entire ratio. <strong>Resizing the page should proportionally resize the menu as well.</strong></p>
  
  <p><a href="http://i.imgur.com/zDgLjRJ.png" rel="nofollow">How it is now</a> ---> <a href="http://i.imgur.com/dE2mdHn.png" rel="nofollow">How it should be</a></p>
  
  <p><a href="http://jsfiddle.net/bAFWv/1/" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p>I've tried a lot of stuff, but couldn't find anything that works. This is my current, horrible, CSS:</p>
  
  <pre><code>#container {
      display: inline;
      padding: 0 0;
      margin: 0 0;height: 20px;
      display: block;
  }
  #container ul {
      display: inline;
      list-style: none;
      white-space: nowrap;
      padding: 0 0;
      margin: 0 0;
      height: 100%;
      width: auto;
  }
  #container ul li {
      display: inline;
      list-style-type: none;
      padding: 0 0;
      margin: 0 0;
      float: left;
      height: inherit;
      max-width: 100%
  }
  #container ul li img {
      height:100%;
      max-width: 100%
  }
  </code></pre>