I've been searching all over, but just cannot find a solution that could work in my case. 
I am trying to use CSS solution for this, I don't know how to implement jquery unfortunately, but maybe someone could point me to the right direction.

I have the following images as an example : <http://pho.to/8rURy>

That picture is quite self explanatory, I need to center, crop and fit the images into the thumbnail that is 80px x 80px

Currently I am stuck on the following CSS :

```
/* Image container */
.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}

/* Image placed in the image container - there is a border around the image, but created as a background */
.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius: 999px !important;
} 

```

The problem here is that the image fits into the container, however it is stretched ( shrunk to be exact ) to fit the container.

I need a solution that would crop, center and fit the image proportionally.

Any ideas ??