Сохраняйте высоту блока в соответствии с соотношением сторон

Я работаю над созданием мобильного сайта для основного веб-сайта нашей компании. То, как он разработан, примерно в 2 раза больше для сетчатки. Что я планирую сделать, так это установить для основного содержимого максимальную ширину 640 пикселей, ширину установить на 100%. У меня есть определенное фоновое изображение, которое прекрасно подходит для этого. Но по мере того, как ширина div становится меньше, мне нужно настроить и высоту. Есть идеи?

Вот css:

*{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;
}