14

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

4 回答 4

25

我确实找到了答案。它添加了一些无语义的标记，但效果很好。可以在这里找到它：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%;
}

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

于 2012-06-13T14:48:04.387 回答
5

你也可以使用一点 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 );
});
于 2013-03-24T00:28:01.890 回答
1

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

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

于 2012-05-28T15:27:09.807 回答
-1

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

于 2013-12-23T00:44:23.843 回答