保持div高度与宽高比相关

Question

保持div高度与宽高比相关

14

我正在建设我们公司主网站的移动友好版。它被设计成适用于retina显示器的2倍大小。我的计划是将主要内容设置在最大宽度为640px、宽度设置为100%的div中。我有一张背景图片很适合这样设计。但随着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;
}

- agmcleod

4个回答

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

- chrisfargen

1

很棒的解决方案，只需要在 $(document).ready(function() 上加上以下代码： $my_div.height( $my_div.width() * aspect_ratio ); - Mathias Asberg

1

当元素的宽度没有固定值（例如100%）时，其高度将会根据内容自适应拉伸以适应容器的宽度（包括填充、边距、边框等）。

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

- Luca

是的，背景图像本质上是几个看起来像按钮的项目。我的计划是适当地在其上方放置链接列表。其中一些会展开其他链接。也许最好将它们分别切片。希望保持http请求的数量较少 :)。 - agmcleod

1

你可以通过创建一个单一的精灵图像，然后使用background-position在列表的每个项目上显示正确的图像来减少这些资产的http请求：http://css-tricks.com/css-sprites/ - Luca

如果我采用您建议中的图像标签，那么这样的功能不就变得不可能了吗？我以前在背景上使用过它来做一些事情，非常方便。 - agmcleod

是的，那只适用于背景图像。我建议使用img标签是因为我认为你只需要显示一张图片而已。 - Luca

-1

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

- user2917560

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- agmcleod · Accepted Answer

我找到了答案。它添加了一点不太符合语义的标记，但运行良好。可以在这里找到：http://jsfiddle.net/AdQ3P/

逻辑在padding-bottom中。基本上，这应该是（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%;
}

那也是我曾经拥有的一个凌乱的书桌，哈哈。