Membuat avatar image lingkaran dengan css

http://stackoverflow.com/questions/21852978/bootstrap-3-using-img-circle-how-to-get-circle-from-non-square-image

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 cirkle */
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 dimention 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;
}