How to turn images into circle shape? Bootstrap 3
I’m using Bootstrap 3, and have set my images to have a circle shape like so:
However, the images are coming out in more of a ellipse shape (see screenshot). I don’t see anything in the base Bootstrap CSS that I would need to adjust. I’ve looked at a couple tutorials on this subject and none of them mention any extra tweaks. Additionally, I’ve edited the size of the image to no avail. What am I doing wrong?
An image has to be a square in order for the styling to make it into a perfectly round circle. (example)
<img class='img-circle' src='..' />
The following bootstrap styling is applied to the
Therefore if the image is rectangular, you will generate an ellipse-like shape. If you want to work around this, you would have to apply a mask over the image. Alternatively, you could probably also clip it.
You might be interested in the following question: How does this CSS produce a circle?.