javascript CSS：保持 div 的高度相对于其宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16539362/
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
CSS: Keeping a div's height relative to its width
提问by Akshaya Shanbhogue
My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio?
我的问题与这个问题非常相似：CSS：100% 宽度或高度同时保持纵横比？
I have a div whose position is fixed. The widthof the div must be 100% and its heightexactly 1/6th of its width. Is there a -webkit-calc()way of doing this?
我有一个位置固定的 div。div的宽度必须是 100%，高度正好是宽度的1/6 。有-webkit-calc()方法吗？
Note:JS solutions are not preferred as a zoom/orientation change can affect the width/height.
注意：JS 解决方案不是首选，因为缩放/方向更改会影响宽度/高度。
采纳答案by Mathijs Flietstra
Is this what you are after? I'm not using -webkit-calc()at all. I've inserted a 1pxby 6pximage into a outer divwhich has position: fixedapplied to it, and set the image to have a widthof 100%and position: relative. Then I have added an inner divwhich is absolutely positioned to be as high and wide as its ancestor.
这是你追求的吗？我根本不用-webkit-calc()。我已将1pxby6px图像插入div已position: fixed应用于它的外部图像，并将图像设置为具有widthof100%和position: relative。然后我添加了一个内部div，它绝对定位为与它的祖先一样高和宽。
Now you can change the width of the outer div, and the images' width: 100%setting will ensure that both the outer and the inner div's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div.
现在您可以更改外层的宽度，div图像的width: 100%设置将确保外层和内层div的高度始终等于其宽度的 1/6（或至少接近完全相等）尽其所能，高度将四舍五入为最接近的像素整数）。任何内容都可以进入内部div。
HTML
HTML
<div>
<div></div>
<img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
CSS
CSS
html, body {
margin: 0px;
padding: 0px;
}
div {
position: fixed;
width: 100%;
}
div > div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
img {
width: 100%;
display: block;
position: relative;
}
Here's a jsFiddleshowing the requested behaviour.
这是jsFiddle显示请求的行为。
回答by web-tiki
You can also use the solution I described in Responsive square columns.
您也可以使用我在响应方列中描述的解决方案。
It is based on the fact that % padding-top/bottomand margin-top/bottomare calculated according to the whidth of the parent element.
它基于这样一个事实，即 %padding-top/bottom和margin-top/bottom根据父元素的宽度计算。
Adapted to your situation it would look like this :
适应您的情况，它看起来像这样：
HTML :
HTML :
<div class="wrap">
<div class="content">
</div>
</div>
CSS :
CSS :
.wrap{
position:fixed;
width:100%;
padding-bottom:16.666%; /* 100x1/6 = 16.666...*/
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
回答by user123_456
you can always set div width like this:
你总是可以像这样设置 div 宽度：
$('#div1').css("width", $('#div1').height()/6);
EDIT:
编辑：
or you could use something like this:
或者你可以使用这样的东西：
/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);
This is only an example-..But it is impossible to get height of a div in a pixels in the css file..you need to use jquery for that
这只是一个例子-..但是不可能在css文件中以像素为单位获得div的高度..你需要为此使用jquery
EDIT:
编辑：
height 1/6 of a width
高度为宽度的 1/6
$('#div1').css("height", window.width()/6);
回答by user123_456
you could use jquery, e.g.$('.someclass').css('width', 180);
$('.someclass').css('height', $('.someclass').width() / 6);
你可以使用jquery，例如$('.someclass').css('width', 180);
$('.someclass').css('height', $('.someclass').width() / 6);
moved the second suggestion from the comment for readability
从评论中移出第二个建议以提高可读性
$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});
