我的问题和这个问题很相似：CSS: 100% width or height while keeping aspect ratio?
我有一个位置固定的 div。 div 的 width 必须是 100%，并且它的 height 正好是它的 width 的 1/6。有 -webkit-calc() 方法吗？
注意： JS 解决方案不是首选，因为缩放/方向更改会影响宽度/高度。
【问题讨论】：
标签： javascript css html responsive-design aspect-ratio
这就是你所追求的吗？我根本没有使用-webkit-calc()。我已将1px by 6px 图像插入到外部div 中，该图像已应用position: fixed，并将图像设置为具有width 的100% 和position: relative。然后我添加了一个内部div，它绝对定位为与其祖先一样高和宽。
现在您可以更改外部div 的宽度，并且图像的width: 100% 设置将确保外部和内部div 的高度始终等于1/6它们的宽度（或至少尽可能接近完全相等，高度将四舍五入到最接近的像素整数）。任何内容都可以进入内部div。
HTML
<div>
<div></div>
<img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>
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;
}
这是一个 jsFiddle 显示请求的行为。
【讨论】：
您也可以使用我在Responsive square columns中描述的解决方案。
基于%padding-top/bottom和margin-top/bottom是根据父元素的宽度计算出来的。
适应你的情况，它看起来像这样：
HTML：
<div class="wrap">
<div class="content">
</div>
</div>
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;
}
【讨论】：
你总是可以像这样设置 div 宽度：
$('#div1').css("width", $('#div1').height()/6);
编辑：
或者你可以使用这样的东西：
/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);
这只是一个例子-..但是不可能在css文件中以像素为单位获取div的高度..你需要使用jquery来实现
编辑：
高度是宽度的 1/6
$('#div1').css("height", window.width()/6);
【讨论】：
你可以使用 jquery，例如$('.someclass').css('width', 180);
$('.someclass').css('height', $('.someclass').width() / 6);
为了便于阅读，从评论中移出了第二条建议
$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});
【讨论】：