How to Make a Circular Image in Css
I'm Very New to This Sort of Thing but This Is My Issue. I've Looked Through a Couple of Questions and It Makes Sense with How to Make It Circular but the...
I'm very new to this sort of thing but this is my issue. I've looked through a couple of questions and it makes sense with how to make it circular but the image which is made circular is half cut off, is there a way of fixing this. I am using HTML and CSS.
circular_image {
float: left;
margin-left: 125px;
margin-top: 20px;
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
background-color: blue;
}
4 Answers
This work for me
clip-path: circle();
Your css rule needs a . (if it applied with a class) or # (if it is applied with an id) at the start.
Also if you apply the rule to a container of the image you need to set the image to re-size accordingly to fit the circle;
Finally, 50% radius is all you need for a circle.
.circular_image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background-color: blue;
/* commented for demo
float: left;
margin-left: 125px;
margin-top: 20px;
*/
/*for demo*/
display:inline-block;
vertical-align:middle;
}
.circular_image img{
width:100%;
}with container
<div class="circular_image">
<img src=""/>
</div>
<br><br>
directly on image
<img class="circular_image" src=""/>You have to set the border-radius to the img itself, not to the containing div. As you know images are square or rectangular and putting them inside something circle will of course cut off the boundaries.
img {
border-radius: 50%;
width: 100px;
height: 100px;
}
Here is the fiddle:
Just add the border-radius:50%; to circular_imageClass.
Below the neet code is....
.circular_image{
float:left;
margin-left:125px;
margin-top: 20px;
width: 200px;
height: 200px;
border-radius: 50%; /* Modified*/
/*overflow:hidden;*/
background-color: blue;
}
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
