Circular button that resizes with window size - css

Question

I'd like to make a circular button (div works too) and put it in the centre with a diameter of 20% of the height of the window. This I can do, but the button will become oval if the window isn't exactly square (I'd like the width and height to be the same - a perfect circle).
.circle {
height: 20%;
width: 20%;
border-radius: 100%;
font-size: 20px;
color: #fff;
line-height: 100px;
text-align: center;
background: #000
}
Hardcoding a pixel value isn't much of an option as it wouldn't resize based on the window. Any ideas?

Answer 1

There are two ways to achive this; with and without JavaScript.
The JavaScript method
Here's a simple demo: little link.
HTML:
<div class = "circle"></div>
CSS:
html, body {
height: 100%;
}
.circle {
border-radius: 1000px;
background-color: rgb(0, 162, 232);
}
JavaScript (uses jQuery, but it isn't necessary):
function upd() {
var h = $("body").height();
$(".circle").height(h / 5);
$(".circle").width(h / 5);
}
upd();
window.onresize = upd;
The non-JavaScript (CSS) method
For a CSS-only solution, you need to use the fact that all padding values are calculated relative to the element parent's width, not height (reference). Little demo: little link.
HTML:
<div class = "wrapper">
<div class = "main">
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
width: 20%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%; /*1:1 ratio*/
display: block;
content: '';
}
.main {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
border-radius: 1000px;
background-color: rgb(0, 162, 232);
/*I wanted it to look good :)*/
font-family: 'Arial', Helvetica, Sans-Serif;
color: white;
}

Answer 2

There is a way to achieve a perfect circle without using any JS, it lies in the specifications definition for padding percentage. When the padding is applied as a percentage it is applied as a percentage of the objects width, which means if you set width and height to 0, and give the object a padding of 20% you'll end up with a circle occupying 20% of the available width. You'll need to get creative to get things inside the circle though.
<style>
html, body {
width:80%;
}
.square
{
width:0%;
height:0%;
padding:20%;
position:relative;
left:25%;/*Position central*/
border-radius:100%;
margin:auto;/*Position central*/
border:1px solid #000000;
}
</style>

Answer 3

The easiest fix is to add min-height and min-width property to that circle with same value.
.circle {
min-width: 100px;
min-height: 100px;
}