Resize and align a picture within a div

How can I resize and align a picture within a div?

I need to show resized images on a 50x50px div. I also want them to be centralized on the div. I've made this image below to show exactly what i want to do.

The problem in that the CSS needs to work when the image is larger on width, and when it's larger on height.

I've found this solution using max-width or max-height, but it only works for one option (larger width, or larger height):

div.img-crop-thumb
{
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.img-crop-thumb img
{
    position: absolute;
    top: 0px;
    left: -50%;
    max-width: 30px;
    height: auto;
}

Use CSS3 background-size: cover.

Here's a working example: http://jsfiddle.net/HBPRv/.

And you can read the documentation here.