Circle with height 100% and matching width

Question

What I need is a circle with a height of 100% and a matching width so it makes a proper round circle.

I need some script that makes the width equal to the height.
I've searched but have not been successful so far.

The CSS:

.circle1 {
    height: 100%;
    background-color: #FF0000;
    border-radius: 50%;
}

The script:

var cw = $('.circle1').width();
    $('.circle1').css({
    'height': cw + 'px'
});

But what this does is making the circle 100% screen width just like the height.

Answer 1

You can achieve this with only CSS using a transparent image with height:100%; width:auto;. In the following demo, I used a random tranparent .png 11px*11px but you can use on with 1*1px.

The circle responds to the height of it's container :

DEMO

body,html{
    height:100%;
    margin:0;
}
img{
    height:100%;
    width:auto;
    border-radius:50%;
    background:teal;
    display:block;
}
div{
    height:100%;
}

<div><img src="http://www.cofetariaonline.ro/images/transparent.png" alt=""></div>