How to make height equal width with css [duplicate]

Question

How to make height equal width with css.

I have HTML like that :

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

Now, I'd like to make height of a element equal width (35%). How can I do that? Thank your help.

Answer 1

Well I have that:

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

You can adapt it to your needs...

And... A little search in google doesn't hurt: https://www.google.com/search?q=make+height+iquals+to+width