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?

<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%;
}

enter image description here


solution

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