首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS:圆形图像

CSS:圆形图像
EN

Stack Overflow用户
提问于 2018-06-10 06:43:45
回答 2查看 34关注 0票数 1

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

代码语言:javascript
复制
#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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-10 06:46:36

填充包括在计算中,边框内的所有内容也包括在内。使用margin而不是padding,它将不会出现在边界框中,从而解决您的问题。

票数 1
EN

Stack Overflow用户

发布于 2018-06-10 07:34:20

为了形成一个完美的圆,你需要宽度和高度相等,所以border-radius: 50%;塑造圆的老办法应该可以正常工作。

代码语言:javascript
复制
img {
  border-radius: 50%;
  border: 1px solid;
}

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

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

.weird2 {
  width: 80px;
  height: 150px;
}
代码语言:javascript
复制
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50779144

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档