css - 保持 div 高度与纵横比相关

Question

我正在努力为我们公司的主网站构建一个适合移动设备的网站。它的设计方式大约是视网膜的 2 倍。我打算做的是将主要内容设置为最大宽度 640px，宽度设置为 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;
}

Answer 1

我确实找到了这个问题的答案。它添加了一点非语义标记，但效果很好。可以在这里找到:http://jsfiddle.net/AdQ3P/

逻辑在填充底部。基本上这需要是 (img_height/img_width) * 100。

编辑 这是代码，因此不依赖于 jsfiddle。

<div class="container">
  <div class="hero"></div>
</div>

.container {
  width:100%;
  max-width:500px;
}

.hero {
  width:100%;
  height:0;
  background-size:100%;
  background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
  padding-bottom:75%;
}

那也是一张凌乱的 table ，哈哈。