保持 div 高度与纵横比相关

问题描述

我正在努力为我们公司的主网站构建一个适合移动设备的网站.它的设计方式大约是视网膜的 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{边框:0}body{font-family:Arial, sans-serif;}身体 {保证金:0;背景色:#fff;}.top, .body {最大宽度:640px；宽度:100%；保证金:0 自动；}.最佳 {背景:白色 url(images/top.jpg) 不重复；背景大小:自动；溢出:隐藏；高度:124px；最大高度:124px；}.top ul {列表样式:无；高度:100%；}.top ul li {高度:100%；向左飘浮;显示:块；}

解决方案

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

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

编辑这是代码，所以不依赖于jsfiddle.

<div class="hero"></div>
.容器 {宽度:100%；最大宽度:500px；}.英雄 {宽度:100%；高度:0；背景尺寸:100%；背景:网址(http://img97.imageshack.us/img97/3410/photo2ue.jpg)不重复；填充底部:75%；}

那也是我的一张凌乱的办公桌，哈哈.

I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?

Here's the 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;
}

解决方案

I did find an answer to this. It adds a little bit of unsemantic markup, but works well.Can find it here: http://jsfiddle.net/AdQ3P/

The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.

Edit Here's the code, so not dependent on 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%;
}

Also that was one messy desk i had lol.

这篇关于保持 div 高度与纵横比相关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！