Question

我的问题与此问题非常相似：CSS: 100% width or height while keeping aspect ratio?

我有一个div，其位置是固定的。 div的 width 必须为100％且 height 恰好是 width 的1/6。是否有 -webkit-calc（）这样做？

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

Answer 1

这就是你追求的吗？我根本没有使用-webkit-calc()。我已将1px 6px图像插入到已应用div的外部position: fixed中，并将图片设置为width { {1}}和100%。然后我添加了一个内部position: relative，它绝对定位为与其祖先一样高和宽。

现在，您可以更改外部div的宽度，图片“div设置将确保外部和内部width: 100%都保证始终具有高度等于其宽度的1/6（或至少接近完全相等的高度，高度将四舍五入到最接近的整数像素）。任何内容都可以进入内部div。

<强> HTML

div

<强> CSS

<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>

这是显示请求行为的 jsFiddle 。

Answer 2

您还可以使用我在Responsive square columns中描述的解决方案。

这是基于以下事实：％padding-top/bottom和margin-top/bottom是根据父元素的宽度计算的。

根据您的情况，它看起来像这样：

<强> FIDDLE

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;
}

Answer 3

你可以像这样设置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);

Answer 4

你可以使用jquery，例如$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width() / 6);

从评论的可读性中移出了第二个建议

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});

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

4 个答案: