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

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