CODEWITHSUNDEEP
htmlcss
RonTheOld
RonTheOld

Reputation: 777

How to make a picture rounded

I have made a simple upload. Where the user can upload his profile. The problem is, right now it is a square, and I just want to make it rounded. I have this so far.

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;
}

The actual circle behind it is rounded, but when the user inserts his profile pic it is square and not rounded, so any help would be great. Thanks

Upvotes: 1

Views: 5330

Answers (5)

HALIE KRIEGER
HALIE KRIEGER

Reputation: 1

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>

Upvotes: -1

L777
L777

Reputation: 8457

Four ways to do it:

1- an image with border-radius: 50%;

2- a container with border-radius: 50%; and an image as background

3- a container with border-radius: 50%; and an image inside

4- an image with a SVG circle clip-path (current method not working on IE and Firefox - today 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>

Upvotes: 2

user6119021
user6119021

Reputation:

1) Apply a class to your <img /> tag:

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

2) Create your CSS for that class, with border-radius: 50%:

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

I make a CodePen of it here: http://codepen.io/anon/pen/MyoEwz.

Upvotes: 0

jollyroger
jollyroger

Reputation: 40

from my years of experience I would recommend doing it with the following:

.pic > img

Thats is how it is done in the olden days my friend!

Upvotes: 1

SCJ
SCJ

Reputation: 25

I don't know how it will work with custom uploads and php but this is the code to round an image

.img-circle {
    border-radius: 50%;
}
<img class="img-circle" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg">

Upvotes: 1

Related Questions