CSS scale and square center crop image

Question

So I have a collection of thumbnails in my app, which is the size of 200x200. Sometimes the original image doesn\'t have this ratio so I am planning to crop this image

Answer 1

Updated to handle cases where image width is greater than height.

You can do this with pure CSS. Set the container element of each image to have fixed height and width and overflow: hidden. Then set the image within to have min-width: 100%, min-height: 100%. Any extra height or width will overflow the container and be hidden.

HTML

CSS

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

Have a look at http://jsfiddle.net/thefrontender/XZP9U/5/