How to turn images into a circle shape? Bootstrap 3

Question

I use Bootstrap 3 and found that my images have this circle shape:

However, the images come out in much of the shape of the ellipse (see screenshot). I don’t see anything in the basic CSS Bootstrap that I will need to configure. I looked through a couple of tutorials on this subject, and none of them mention any additional settings. In addition, I edited the image size to no avail. What am I doing wrong?

<div class='container'> <div class='row'> <div class='col-md-4'> <img class='img-circle' src='img/family2.png' /> <h2>One</h2> <p>Lorem ispum</p> </div> <div class='col-md-4'> <img class='img-circle' src='img/fruit2.jpg' /> <h2>Two</h2> <p>Lorem ispum</p> </div> <div class='col-md-4'> <img class='img-circle' src='img/fruit2.jpg' /> <h2>Three</h2> <p>Lorem ispum</p> </div> </div> </div> img { display: block; height: auto; max-width: 100%; } 

Answer 1

The image should be a square so that the style can turn it into a completely round circle. (example)

 <img class='img-circle' src='..' /> 

For the img-circle element, the following bootstrap style is applied:

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

Therefore, if the image is rectangular, you will create an elliptical shape. If you want to get around this, you will have to apply a mask to the image. In addition, you could possibly also copy it.

You might be interested in the following question: How does this CSS create a circle? .