CSS：圆形图像

Question

我正在尝试制作一个圆形图像，但它看起来并不是一个完美的圆圈，这里是我的代码片段和显示结果的链接

#aboutme{
 padding: 150px;
}

#aboutme img{
 border-radius: 50%;
 border: 0;
 width: 150px;
 vertical-align: middle;
 float:left;
 padding: 0px 10px 10px 0px;
}

这就是：https://gyazo.com/92f967809fc4dea91a8a5cbaabf8d087

Answer 1

填充包含在计算中，边框内的所有内容都包含在内。使用margin代替padding，它不会在边框内，解决您的问题。

Answer 2

要形成一个完美的圆形，你需要宽度等于高度，所以border-radius: 50%;用于塑造圆形的hackie方式可以正常工作。

＆＃13;

＆＃13;

img {
  border-radius: 50%;
  border: 1px solid;
}

.perfect {
  width: 150px;
  height: 150px;
}

.weird1 {
  width: 150px;
  height: 83px;
}

.weird2 {
  width: 80px;
  height: 150px;
}

＆＃13;

<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>

＆＃13;

＆＃13;

＆＃13;