如何在CSS中实现圆形图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (87)

我试着做一个图像循环,但它看起来并不是一个完美的圆圈,这里是我的代码片段和一个显示结果的链接。

#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

提问于
用户回答回答于

为了形成一个完美的圆,你需要宽度等于高度,所以border-radius: 50%;因为圆的塑造是正确的。

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

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

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

.weird2 {
  width: 80px;
  height: 150px;
}
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>

用户回答回答于

计算中包括填充内容,边框内的所有内容也是如此。使用margin而不是padding它不会在边框箱里,解决你的问题。

扫码关注云+社区

领取腾讯云代金券