12

I'm using Bootstrap 3, and have set my images to have a circle shape like so:

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?

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

enter image description here

Ralitza
  • 741
  • 2
  • 7
  • 12
  • Have you tried making the image square? Take a look at [this example](http://jsfiddle.net/msBtA/).. – Josh Crozier Mar 17 '14 at 01:03
  • 1
    That was the solution. One question, I've specified the width/height in my CSS file but now the images are no longer responsive. Is there a way to achieve this without manually resizing each image? Many thanks! – Ralitza Mar 17 '14 at 01:21
  • I personally don't know of any other way. Instead of pixel try percents, for the responsiveness. – Idris Mar 17 '14 at 01:33
  • @RalitzaIankova Alright - I'll just add that in as an answer for completion sake. Someone might be wondering the same thing in the future.. In regards to your question, as long as you're still specifying a `max-width` of `100%`, it should still be responsive when the viewport/area is smaller than the dimensions.. http://jsfiddle.net/TJWFL/ .. you could always use percentage based units. – Josh Crozier Mar 17 '14 at 01:34

1 Answers1

28

An image has to be a square in order for the styling to make it into a perfectly round circle. (example)

<img class='img-circle' src='..' />

The following bootstrap styling is applied to the img-circle element:

.img-circle {
    border-radius: 50%;
}

Therefore if the image is rectangular, you will generate an ellipse-like shape. If you want to work around this, you would have to apply a mask over the image. Alternatively, you could probably also clip it.

You might be interested in the following question: How does this CSS produce a circle?.

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304