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, <

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:

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.