When the size of the image that you want to put inside a circle is more than the size of the circle itself, there are chances that some part of the image will flow out of the containing circle and might cover other adjacent elements.
To fix this problem, we have to fit the image inside its containing circle.
We can very easily solve this problem with a little CSS code. However, the solution depends on the way you have put the image inside the circle.
I mean you can either use the image as a background image of the containing element or you can directly put it inside the containing element using the <img src="image path"> tag.
So, let’s assume you have used the <img> tag to put the image inside the circle. Then, to fit the image inside its containing circle, you have to set the image width and height to 100% and then apply overflow: hidden; on the containing circle.
But, it might destroy the original aspect ratio of the image, which can be fixed by setting the object-fit property to cover.
See the following example:
Example:
.circle{
width: 250px;
height: 250px;
border: 5px solid red;
border-radius: 50%;
overflow: hidden;
}
.circle img{
width: 100%;
height: 100%;
object-fit: cover;
}
Another possible approach is that you are using the image as the background image of the containing circle.
In that case, you can use the background-size property in combination with the other background properties such as background-repeat, background-position, etc.
The background-size property specifies how much area of the containing element should the background image cover. In our case, we have to set the background-size property to cover so that the background image could cover the whole area of the circle.
See the following example:
Example:
.circle{
width: 250px;
height: 250px;
border-radius: 50%;
background-image: url(images/cat.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: 5px solid red;
}
