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

【问题标题】：Making a picture into a circle view using CSS only仅使用 CSS 将图片制作成圆形视图
【发布时间】：2015-02-23 13:01:23
【问题描述】：

以下代码有效

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

【问题讨论】：

您的代码运行良好jsfiddle.net/u7wL57um
您可以简单地删除div的高度宽度并给出显示内联块。您可以从 img 控制高度宽度。 <div style="display: inline-block; border-radius:50%; overflow:hidden;"> <img src="avatar.png" alt="Squared Avatar" /> </div>
甚至 % 也可以，因为你使用的图像小于容器宽度，你无法获得准确的输出，尝试 2 使用更大的图像，否则你需要设置一个固定的容器宽度以获得所需的输出
jsfiddle.net/hwrukLgw/2 设置图像width:100% 和height:auto 以便相应调整 div 将根据图像进行调整height
应用“border-radius:300px;”你会得到你的DIV作为圆圈..

【解决方案1】：

百分比取决于父母。如果你没有定义父母的height和/或width（最高级别的父母是body和html），那么你什么都没有工作。

【讨论】：