根據寬度設置div高度

Question

是否可以動態設置div寬度，然後將其高度設置爲該寬度的某個百分比。這樣的事情：

#myDiv{ 
    width:%100; 
    height: {35% of width}; 
} 

我想保留一個div的寬度與高度的比率，無論寬度可能是什麼。

Answer 1

HTML：

<div class='box'> 
    <div class='content'>All your content are belong to us</div> 
</div> 

我們用兩個塊元素，以達到所期望的行爲，寬度框，高度內容框。

CSS：

.box{ 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
.box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /*What you want the height to be in relation to the width*/ 
} 

內容：
然後將內容設置爲覆蓋整個盒子絕對所以無論大小，它適合！

.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

田田你做......

來源：Pure CSS

Answer 2

嘗試一個簡單的JavaScript：

document.getElementById("elemID").style.height = 
Math.round((document.getElementById("elemID").style.width * 100)/35) + "px"; 

這將得到的用百分比（四捨五入），並將其分配給高度。

Answer 3

您可以通過將高度設置爲零，然後向padding-bottom添加百分比來完成此操作。您可能需要調整它一點點地得到想要的結果，但這裏有一個撥弄一個例子 http://jsfiddle.net/wbq8o3s7/

#myDiv{ 
    width:%100; 
    height:0; 
    padding-bottom:35%; 
    background-color:#333; 
}