17

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

我有一个位置固定的 div。div的宽度必须为 100%，高度正好是其宽度的 1/6 。有没有这样做的-webkit-calc()方式？

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

4

4 回答 4

11

这就是你所追求的吗？我根本没用-webkit-calc()。我已将1pxby图像插入到已应用于它6px的外部，并将图像设置为具有and 。然后我添加了一个绝对定位为与其祖先一样高和宽的内部。divposition: fixedwidth100%position: relativediv

现在您可以更改 external 的宽度div，并且图像的width: 100%设置将确保 external 和 innerdiv的高度始终等于其宽度的 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显示请求的行为。

于 2013-05-14T11:10:51.303 回答
9

您也可以使用我在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;
}
于 2014-04-04T14:55:38.337 回答
-1

你总是可以像这样设置 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);
于 2013-05-14T09:21:42.197 回答
-1

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

从评论中移出第二条建议以提高可读性

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});
于 2013-05-14T09:28:31.333 回答