CSS：保持div的高度相对于其宽度

我的问题非常类似于这个问题:CSS: 100%宽度或高度，同时保持长宽比?

我有一个div的位置是固定的。div的宽度必须为100%，其高度恰好是其宽度的1/6。是否有-webkit-calc()的方法来做到这一点?

注意: JS解决方案不是首选的，因为缩放/方向改变会影响宽度/高度

这是你想要的吗?我根本不用-webkit-calc()。我已经将1px由6px图像插入到外部div中，position: fixed应用于它，并将图像设置为100%和position: relative的width。然后我添加了一个内部div，它绝对定位为和它的祖先一样高和宽。

现在你可以改变外部div的宽度，并且图像的width: 100%设置将确保外部和内部div的高度始终等于其宽度的1/6(或者至少尽可能接近完全相等，高度将被四舍五入到最接近的整数像素)。任何内容都可以放入内部div。

<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显示请求的行为。

您也可以使用我在响应式方框列中描述的解决方案。

这是基于% 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);});

相关内容

最新更新

热门标签：