如何用css使高度等於寬度

Question

如何用css使高度等於寬度。

我有HTML這樣的：現在

<div style="width:900px;height:200px;"> 
<a style="display:block; float:left; width:35%; background:green"></a> 
</div> 

，我想使a元件相等的寬度（35％）的高度。我怎樣才能做到這一點？感謝您的幫助。

Answer 1

使用window.getComputedStyle得到計算寬度，然後進行計算以獲得與寬度相同的等效百分比。

HTML

<div class="someDiv" style="width:900px;height:200px;"> 
    <a class="someAnchor" style="display:block; float:left; width:35%; background:green"></a> 
</div> 

JS

var anchor = document.querySelector(".someDiv .someAnchor"); 
var astyle = window.getComputedStyle(anchor); 
anchor.style.height = astyle.width; //this will make it static though 

//to make it a percentage like width so it will expand and contract with resize of parent element 

var pstyle = window.getComputedStyle(anchor.parentNode); 
var pheight = parseInt(pstyle.height); 
var awidth = parseInt(astyle.width); 
anchor.style.height = ((awidth/pheight)*100)+"%"; 

注意，錨元素會比格高度明智更大，以保持它，你將不得不將其縮小父裏面。

JSFiddle Demo

Answer 2

嗯，我有一個：

HTML：

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div> 

CSS：

.box{ 
    background:#000; 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
.box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 

的jsfiddle：http://jsfiddle.net/wGszc/

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

你可以把它適應您的需求...

和...在谷歌搜索小不傷：https://www.google.com/search?q=make+height+iquals+to+width