html - 仅使用CSS将图片制作成圆形 View

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才能达到这样的效果，而不是百分比？我知道使用百分比比使用像素更灵活。

这里是 jsfiddle ，如果我们调整结果 Pane 的大小，您可以看到 P1 使用百分比自动调整大小，所以问题是这个 100% 来自哪里？我以为100%是指图片的宽高，而不是边框​​。

=====更新:12/26/2014======

谢谢大家，@jmore009 已经回答了问题。

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

Answer 1

parent 的百分比工作。如果您没有定义 parent 的 height 和/或 width，它表示 100% 或 50% (最高级别的父级是 body 和 html)那么你就没有什么可做的了。