Как превратить изображения в форму круга? Bootstrap 3
Я использую Bootstrap 3, и мои изображения имеют форму круга, например:
Однако изображения выглядят более эллиптическими (см. Скриншот). В базовом CSS Bootstrap я не вижу ничего, что мне нужно было бы настроить. Я посмотрел пару уроков на эту тему, и ни один из них не упоминает никаких дополнительных настроек. Кроме того, я отредактировал размер изображения безрезультатно. Что я делаю неправильно?
<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%;
}