Create a circle image using CSS only

Question

The following code works

<div style="width:485px; height:485px; border-radius:50%; overflow:hidden;"> <img src="avatar.png" alt="Squared Avatar" /> </div> 

But these codes will not,

 <div style="width:100%; height:100%; border-radius:50%; overflow:hidden;"> <img src="avatar.png" alt="Squared Avatar" /> </div> 

I'm just wondering why the width and height should be px to achieve this effect, not percent ? I know that using percent is more flexible than using px.

Here jsfiddle , if you resize the result area, you can see that the sizes of P1 are automatically resized, as expected, to use percentages, so the question is, where is this 100% ? I thought that 100% indicates the width and height of the image, not the frame.

===== Update: 12/26/2014 ======

Thanks guys, @ jmore009 answered the question.

I forgot that the div inherits the width and height from the parent div, so 100% refers to the body element, which by default changes when the browser is resized. Here is my updated jsfiddle .

Answer 1

interest is disconnected from the parent. it says 100% about something else or 50% about something else, if you do not define the parent height and / or width (the parent of the highest level of body and html ), then you have nothing to work out.