Bootstrap 3: Using img-circle, how to get circle from non-square image?

Question

I have rectangular, not necessarily square images.

Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.

How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.

JSFiddle to illustrate the non-circular behavior of non-square img-circle images.

<div class="container-fluid text-center">     <div class="row">         <div class="col-xs-12">img-circle test</div>     </div>      <div class="row">         <div class="col-xs-6">             <img class="img-responsive" src="http://placekitten.com/g/200/200" />         </div>         <div class="col-xs-6">             <img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />         </div>     </div>      <div class="row">         <div class="col-xs-6">             <img class="img-responsive" src="http://placekitten.com/g/200/400" />         </div>         <div class="col-xs-6">             <img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />         </div>     </div>      <div class="row">         <div class="col-xs-6">             <img class="img-responsive" src="http://placekitten.com/g/400/200" />         </div>         <div class="col-xs-6">             <img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />         </div>     </div>  </div> 

Answer 1

I see that this post is a little out of date but still... I can show you and everyone else (who is in the same situation as I was this day) how i did it.

First of all, you need html like this:

<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div> 

Than your css class will look like this:

div.circle-avatar{ /* make it responsive */ max-width: 100%; width:100%; height:auto; display:block; /* div height to be the same as width*/ padding-top:100%;  /* make it a circle */ border-radius:50%;  /* Centering on image`s center*/ background-position-y: center; background-position-x: center; background-repeat: no-repeat;  /* it makes the clue thing, takes smaller dimension to fill div */ background-size: cover;  /* it is optional, for making this div centered in parent*/ margin: 0 auto; top: 0; left: 0; right: 0; bottom: 0; } 

It is responsive circle, centered on original image. You can change width and height not to autofill its parent if you want. But keep them equal if you want to have a circle in result.

Link with solution on fiddle

I hope this answer will help struggling people. Bye.