Jak ustawić wysokość równą szerokości z css

Question

Jak ustawić wysokość równą szerokości za pomocą css.

Mam HTML tak:

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

Teraz chciałbym, aby wysokość a elementów równej szerokości (35%). Jak mogę to zrobić? Dziękuję za pomoc.

Answer 1

korzystanie window.getComputedStyle uzyskać komputerowej szerokość, a następnie wykonaj obliczenia, aby uzyskać równy procent, który spowoduje, że będzie taki sam rozmiar jak szerokość.

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)+"%"; 

Należy zauważyć, że element kotwica będzie większa niż wysokość div mądry, aby utrzymać go wewnątrz rodzica będzie trzeba go skalować w dół.

JSFiddle Demo

Answer 2

No muszę, że:

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

można dostosować go do swoich potrzeb ...

I ... Trochę szukaj w google nie boli: https://www.google.com/search?q=make+height+iquals+to+width