保持 div 高度与纵横比相关答案

【问题标题】：Keep div height relevant to aspect ratio保持 div 高度与纵横比相关
【发布时间】：2012-06-02 22:51:15
【问题描述】：

我正在为我们公司的主要网站构建一个适合移动设备的网站。它的设计方式大约是视网膜的 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;
}

【问题讨论】：

标签： css responsive-design

【解决方案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%;
}

那也是我的一张凌乱的桌子，哈哈。

【讨论】：

你可能想看看这篇博文：（好像他是根据你的回答写的：）inspectelement.com/tutorials/…
可能:)。我相信我在某处偶然提到了它，并为我的目的做了一些调整。
有趣的想法。你有什么浏览器兼容性问题吗？
我现在没有做那么多前端工作，所以我不能告诉你。我想出这个解决方案的网站在 Firefox、Chrome、Mobile Safari 和 IE 8 上进行了测试。

【解决方案2】：

你也可以使用一点 jQuery。我相信它的优点是它在语义上是有效的修复，所以下一个编辑你的代码的人可能更容易理解发生了什么。

// Maintain aspect ratio of #my_div

// Set aspect ratio of #my_div
var aspect_ratio = 0.8;

// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");

// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
  $my_div.height( $my_div.width() * aspect_ratio );
});

// Resize #my_div on browser resize
jQuery(window).resize(function() {
  $my_div.height( $my_div.width() * aspect_ratio );
});

【讨论】：

很好的解决方案，只需要 $(document).ready(function() on $my_div.height( $my_div.width() * aspect_ratio );

【解决方案3】：

当非固定宽度（例如 100%）占据容器的所有宽度时，元素的高度在未设置为固定大小时会拉伸以适应任何流入内容（包括内边距、边距、边框...... .)

如果您可以使用<img> 标记代替背景图像，则可以将max-width:100% 应用于图像本身，它会缩放以适应容器 - 浏览器会调整其高度以保持纵横比一致 - 但是用图像标签替换 css 背景并不总是可行的，或者在语义和/或您可能面临的任何布局问题方面的最佳选择。

【讨论】：

是的，背景图像本质上是一些看起来像按钮的项目。我的计划是适当地在顶部放置一个链接列表。其中一些扩展了其他链接。也许是分开切片的最好方法。希望减少 http 请求:)。
您可以通过创建单个精灵图像然后使用背景位置在列表的每个项目上显示正确的图像来降低对此类资产的 http 请求：css-tricks.com/css-sprites
如果我按照您的建议使用图像标签，这不会使这样的功能变得不可能吗？我以前在背景上用过一些东西，非常方便。
是的，这仅适用于背景图像。 img 标签建议是因为我认为您只需要显示图像即可。

【解决方案4】：

使用新的相对字体大小单位，例如，在没有设置高度或 img 的情况下工作得很好虚拟机（http://www.sitepoint.com/new-css3-relative-font-size/）。

【讨论】：