Circle image appearing as oval in Bootstrap 4

user_9387790 0
Viewed 4989

Working on creating circular avatar images in a Node Web App and when I set the image's Boostrap class to:

class="rounded-circle"

It appears as an oval, rather than a circle. I've seen similar questions on here where answers have indicated the original images dimensions may play a factor in the shape of the circle. The below vanilla CSS with a custom class had the same effect in creating an oval instead of a circle: 

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

What can I do (from a CSS or Bootstrap standpoint) to ensure the avatar actually displays as a perfect circle rather than a more ovular shape? Thanks in advance for the help

bootstrap-4 css html
2 Answers

You should define it as square,then apply border-radius.Here's the solution:

.rounded-circle{
border:1px solid;
border-radius:50%;
width:50px;
height:50px;
}
<div class="rounded-circle"></div>

user_132989000

You gotta determine the size of image and put object fit: cover to avoid stretching image on square shape

.object-fit-cover {
width:50px;
height:50px;
object-fit:cover
}
<img class='rounded-circle object-fit-cover' />
user_10858480
Related