title: How to turn images into circle shape? Bootstrap 3
body: <p>I'm using Bootstrap 3, and have set my images to have a circle shape like so:</p>
  
  <p>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?</p>
  
  <pre><code> &lt;div class='container'&gt;
      &lt;div class='row'&gt;
        &lt;div class='col-md-4'&gt;
          &lt;img class='img-circle' src='img/family2.png' /&gt;
          &lt;h2&gt;One&lt;/h2&gt;
          &lt;p&gt;Lorem ispum&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class='col-md-4'&gt;
          &lt;img class='img-circle' src='img/fruit2.jpg' /&gt;
          &lt;h2&gt;Two&lt;/h2&gt;
          &lt;p&gt;Lorem ispum&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class='col-md-4'&gt;
          &lt;img class='img-circle' src='img/fruit2.jpg' /&gt;
          &lt;h2&gt;Three&lt;/h2&gt;
          &lt;p&gt;Lorem ispum&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  img {
    display: block;
    height: auto;
    max-width: 100%;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zvbrI.png" alt="enter image description here"></p>