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

You can do this easily in CSS if you use background-image.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

In this fiddle, first image is 400x800, second image is 800x400:

http://jsfiddle.net/samliew/tx7sf