Como transformar imagens em forma de círculo? Bootstrap 3
Estou usando o Bootstrap 3 e configurei minhas imagens para terem um formato de círculo assim:
No entanto, as imagens são exibidas em mais formato de elipse (veja a captura de tela). Não vejo nada no CSS básico do Bootstrap que eu precise ajustar. Analisei alguns tutoriais sobre esse assunto e nenhum deles menciona nenhum ajuste extra. Além disso, editei o tamanho da imagem sem sucesso. O que estou fazendo errado?
<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%;
}