How to turn images into circle shape? Bootstrap 3

Question

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\

Answer 1

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 img-circle element:

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

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?.