Question

我做了一个简单的上传。用户可以上传他的个人资料。问题是，现在它是一个正方形，我只是想让它四舍五入。到目前为止我有这个。

CSS：

.pic {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 2px solid rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 50%; 
    height: 200px;
    width: 200px;
    text-align: center;
}

它背后的实际圆圈是圆形的，但是当用户插入他的轮廓图片时它是正方形而不是圆角，所以任何帮助都会很棒。谢谢

Answer 1

四种方法：

1 - 包含border-radius: 50%;

的图片

2 - 包含border-radius: 50%;且图像为背景的容器

3 - 包含border-radius: 50%;且内部图片

的容器

4 - 带有SVG圈clip-path的图片（目前的方法不适用于IE和Firefox - 今天2016）

body {
  background: honeydew;  
}

#pic {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

#imgcontainer {
  width: 160px;
  height: 160px;
  position: relative;
  vertical-align: bottom;
  background-image: url(http://i.imgur.com/YwbFAEg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  border-radius: 50%;
}

#container {
  width: 160px;
  height: 160px;
  position: relative;
  vertical-align: bottom;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

#pic2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  height:100%;
  width:100%;
}

#pic3 {
  width: 160px;
  height: 160px;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

span {
  display: inline-block;  
}

<span>1.<img id=pic src="http://i.imgur.com/YwbFAEg.jpg"></span><span>2.<div id=imgcontainer></div></span><span>3.<div id=container><img id=pic2 src="http://i.imgur.com/YwbFAEg.jpg"></div></span><span>4.<img id=pic3 src="http://i.imgur.com/YwbFAEg.jpg"></span>

Answer 2

我不知道它如何与自定义上传和php一起使用，但这是圆形图像的代码

＆＃13;

.img-circle {
    border-radius: 50%;
}

＆＃13;

<img class="img-circle" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg">

＆＃13;

Answer 3

根据我多年的经验，我建议您使用以下内容：

.pic＆gt; IMG

多数民众赞成在过去的日子里如何完成我的朋友！

Answer 4

1）将课程应用到<img />标签：

<img class="UserProfile" width='100%' height='100%' src='Image/userImages/profile.png' alt='Default Profile Pic'>

2）使用border-radius: 50%：

为该课程创建CSS

.UserProfile
{
  height:60%;
  border-radius:50%;
}

我在这里制作了一个CodePen：http://codepen.io/anon/pen/MyoEwz。

Answer 5

＆＃13;

body {
  background: honeydew;  
}

#pic {
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

#imgcontainer {
  width: 160px;
  height: 160px;
  position: relative;
  vertical-align: bottom;
  background-image: url(http://i.imgur.com/YwbFAEg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  border-radius: 50%;
}

#container {
  width: 160px;
  height: 160px;
  position: relative;
  vertical-align: bottom;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}

#pic2 {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  height:100%;
  width:100%;
}

#pic3 {
  width: 160px;
  height: 160px;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

span {
  display: inline-block;  
}

＆＃13;

<span>1.<img id="pic" src="http://i.imgur.com/YwbFAEg.jpg"></span><span>2.<div id="imgcontainer"></div></span><span>3.<div id="container"><img id="pic2" src="http://i.imgur.com/YwbFAEg.jpg"></div></span><span>4.<img id="pic3" src="http://i.imgur.com/YwbFAEg.jpg"></span>

＆＃13;

如何制作图片

5 个答案: