title: CSS scale and square center crop image
body: <p>So I have a collection of thumbnails in my app, which is the size of <em>200x200</em>. Sometimes the original image doesn't have this ratio so I am planning to crop this image to a square.</p>
  
  <p>Currently it just streches the image to fit into the thumbnail, so say my original image size is <em>400x800</em>, 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 <em>400x400</em>.</p>
  
  <p>Is there a way to easily do this via CSS or do I have to use some sort of JS to do this?</p>