Estoy usando Bootstrap 3, y he configurado mis imágenes para que tengan una forma circular como esta:

Sin embargo, las imágenes salen más en forma de elipse (ver captura de pantalla). No veo nada en el CSS de Bootstrap base que deba ajustar. He visto un par de tutoriales sobre este tema y ninguno de ellos menciona ajustes adicionales. Además, he editado el tamaño de la imagen en vano. ¿Qué estoy haciendo mal?

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