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的高度相對保持其寬度

回答

相關問題