CSS scale and square center crop image

css, html, image, javascript, jquery

Solution

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

Problem

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 to a square. Currently it just streches the image to fit into the thumbnail, so say my original image size is 400x800, then the image looks very squished. I wanted to crop this image so it looks at the shortest width/height and then crop it to a square, so in my example above it will be cropped to a 400x400. Is there a way to easily do this via CSS or do I have to use some sort of JS to do this?

Original source