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%;
}

那也是一个凌乱的办公桌，我哈哈。

Answer 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 );
});

Answer 3

虽然非固定宽度（例如100％）占据了容器的所有宽度，但未设置为固定尺寸时元素的高度将拉伸以适应任何流入内容（包括填充，边距，边框等）。。）

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

Answer 4

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

保持div高度与纵横比相关

4 个答案: