Making a picture into a circle view 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 won't,

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

I just wonder why width and height have to be px in order to achieve such effect, rather than percentage? I know using percentage is more flexible than using px.

Here is jsfiddle, if we resize the result pane, you can see the P1 resizes automatically as expected for using percentage, so the question is where is this 100% from? I thought that 100% indicates the width and height of the picture rather than the frame.

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

Thank you guys, @jmore009 has answered the question.

I forgot div inherits width and height from its parent div, so the 100% is from the body element, which resizes when browser resizes by default. Here's my updated jsfiddle.

Answer 1

percentages work off of a parent. it's saying 100% of something else or 50% of something else, if you do not define a parent's height and/or width (the highest level parent being body and html) then you have nothing to work off of.