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

Question

以下代码有效

<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.

Answer 1

百分比由父母负责。它是在说100%别的东西或50%别的东西，如果你没有定义父母的height和/或width（最高级别的父母是body和html）那么你就没有什么可做的。