Ich verwende Bootstrap 3 und habe meine Bilder so eingestellt, dass sie eine Kreisform haben:

Die Bilder werden jedoch eher ellipsenförmig ausgegeben (siehe Screenshot). Ich sehe im Basis-Bootstrap-CSS nichts, was ich anpassen müsste. Ich habe mir ein paar Tutorials zu diesem Thema angesehen und keine erwähnt zusätzliche Optimierungen. Außerdem habe ich die Größe des Bildes ohne Erfolg bearbeitet. Was mache ich falsch?

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