CODEWITHSUNDEEP
htmlcss
Julie24
Julie24

Reputation: 279

make picture fit in css circle

Is there a way where you can make a picture fit automatically in a css circle? Fx if a user add a picture there is 500px * 500px, but the circle is 100px * 100px. When I upload a picture now, the picture is just filling out the screen, instead of staying inside the circle.

<html>
<head>
  <style>


  #circle
 {
   border-radius:50% 50% 50% 50%;  
   width:100px;
   height:100px;
}
 </style>

</head>
<body>
   <img src="skin-tone.jpg" id="circle">
</body>
</html>

Upvotes: 0

Views: 18823

Answers (3)

Prakash Dahal
Prakash Dahal

Reputation: 530

There are multiple ways of doing it but one simple way is given below:

 #circle{
     background: url("imageUrl.jpg");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
     border-radius: 50%;
     height: 100px;
     width: 100px;
}

Upvotes: 1

jhorapb
jhorapb

Reputation: 736

What you have to do is to set a max-width and max-height to the img element. For example, you can say to your img to be of max-width:100px and max-height:100px.

Upvotes: -2

JordyV
JordyV

Reputation: 389

Try this CSS

#circle {
    background: skin-tone.jpg;
    background-size: cover;
    border-radius:50% 50% 50% 50%;
    width:100px;
    height:100px;
}

Upvotes: 5

Related Questions