title: Keep div height relevant to aspect ratio
body: <p>I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?</p>
  
  <p>Here's the css:</p>
  
  <pre><code>*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
  
  body {
    margin:0;
    background-color:#fff;
  }
  
  .top, .body {
    max-width:640px;
    width:100%;
    margin:0 auto;
  }
  
  .top {
    background: white url(images/top.jpg) no-repeat;
    background-size:auto;
    overflow:hidden;
    height:124px;
    max-height:124px;
  }
  
  .top ul {
    list-style:none;
    height:100%;
  }
  
  .top ul li {
    height:100%;
    float:left;
    display:block;
  }
  </code></pre>