html – 仅使用CSS将图片制作成圆形视图

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

但这些代码不会,

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

我只是想知道为什么宽度和高度必须是px才能达到这样的效果,而不是百分比？我知道使用百分比比使用px更灵活.

这是jsfiddle,如果我们调整结果窗格的大小,您可以看到P1按预期自动调整使用百分比,所以问题是这100％来自哪里？我认为100％表示图片的宽度和高度而不是框架.

=====更新：2014年12月26日======

谢谢你们,@ jmore009回答了这个问题.

我忘了div从其父div继承宽度和高度,所以100％来自body元素,默认情况下浏览器调整大小时会调整大小.
这是我最新的jsfiddle.