保持div高度与宽高比相关 [英] Keep div height relevant to aspect ratio
问题描述
我正在建立我们公司主网站的移动友好网站。它的设计方式是视网膜的2倍。我计划做的是将主要内容设置为最大宽度为640像素,宽度设置为100%。我有一个特定的背景图像,很适合做到这一点。但随着div的宽度变小,我需要调整高度。任何想法?
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?
这里是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;
}
推荐答案
这个。它添加了一点无意义的标记,但工作得很好。
可以在这里找到: http://jsfiddle.net/AdQ3P/
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/
逻辑在填充底部。基本上这需要是(img_height / img_width)* 100。
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
编辑这里是代码,所以不依赖于jsfiddle。
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%;
}
这也是一个凌乱的办公桌我有lol。
Also that was one messy desk i had lol.
这篇关于保持div高度与宽高比相关的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!