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

我的问题很相似，这个问题：CSS: 100% width or height while keeping aspect ratio?CSS：一个div的高度相对保持其宽度

我有一个div其位置固定。该div的宽度必须是其100％，其高度恰好是其宽度的1/6。有没有-webkit-calc（）这样做？

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

2013-05-14 Akshay

感谢您的解决方案。我个人无法重新测试，因为一年前我有这个问题，并且已经失去了语境。也许下一个有这个问题的人会尝试你的解决方案。 :) – Akshay 2014-04-24 09:22:23

这是你所追求的？我根本没有使用-webkit-calc()。我已将1px的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显示要求的行为。

来源

2013-05-14 11:10:51

+1非常好的创意解决方案！ – Christoph 2013-05-14 12:03:36

谢谢，你摇滚:) – Akshay 2013-05-15 05:08:22

聪明的解决方案！ – 2014-10-09 08:30:48

-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的那个

EDI T：宽度

$('#div1').css("height", window.width()/6);

来源

2013-05-14 09:21:42

感谢您的答案，但这并不能解决我的问题。 width：-webkit-calc（100％/ 16.66666666667）;使宽度为家长宽度的1/6。我需要身高的1/6宽度！ :)谢谢 – Akshay 2013-05-14 09:31:58

@Akshay，但你不能这样做在CSS中，你只能用javascript做到这一点 – 2013-05-14 09:35:01

我正在阅读关于webkit的计算，并想知道我们是否可以使用它.. – Akshay 2013-05-14 09:36:02

-1

你可以使用jquery的

高度1/6，例如$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6);

移动从评论中的第二个建议是为了便于阅读

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

来源

2013-05-14 09:28:31

谢谢。不解决问题。宽度仅适用于调整大小问题的100％。所以，如果我通过JS修复我的身高，并且放大或改变方向，高度不会重置为宽度的1/6。 – Akshay 2013-05-14 09:35:12

对不起，我误解了，也许我还是这样做的;如果它只是调整大小的问题，那么必须有一个触发事件，你可以用jquery捕捉到（参见修改后的示例）;如果它没有通过按钮调整大小，那么应该有另一个适当的事件来赶上 – 2013-05-14 10:03:12

您也可以使用我在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; 
}

来源

2014-04-04 14:55:38

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

回答

相关问题