CSS 保持 div 高度与纵横比相关
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10786876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep div height relevant to aspect ratio
提问by agmcleod
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?
我正在努力为我们公司的主网站建立一个适合移动设备的网站。它的设计方式大约是视网膜的 2 倍。我打算做的是将主要内容设置为最大宽度为 640 像素,宽度设置为 100%。我有一个非常适合的背景图像。但是随着 div 的宽度变小,我也需要调整高度。有任何想法吗?
Here's the css:
这是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;
}
回答by agmcleod
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/
我确实找到了答案。它添加了一点非语义标记,但效果很好。可以在这里找到:http: //jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
逻辑在填充底部。基本上这需要是 (img_height / img_width) * 100。
EditHere's the code, so not dependent on jsfiddle.
编辑这是代码,因此不依赖于 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.
那也是我的一张凌乱的桌子,哈哈。
回答by chrisfargen
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
你也可以使用一点 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 );
});
回答by Luca
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
虽然非固定宽度(例如 100%)占据容器的所有宽度,但未设置为固定大小的元素的高度将拉伸以容纳任何流入的内容(包括填充、边距、边框...)
if you can use an <img>
tag instead of a background image, you can then apply max-width:100%
to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
如果您可以使用<img>
标签而不是背景图像,那么您可以应用max-width:100%
到图像本身,它会缩放以适合容器 - 浏览器将负责调整其高度以保持纵横比一致 - 但是替换 css 背景就语义和/或您可能面临的任何布局问题而言,使用图像标签并不总是可能的或最佳选择。
回答by user2917560
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
使用新的相对字体大小单位,例如 vm(http://www.sitepoint.com/new-css3-relative-font-size/),在没有设置高度或 img 的情况下工作得很好。