Keep the original ratio in a thumbnail image

Question

I’m using a thumbnail size of 100 * 60 in my blog, but sometimes I want to use square images.

Is it possible to use a Wordpress plugin or CSS to make it fits by adding background in the sides to keep the original ratio of the image?

Example:

1. Original image size : 120 x 120
2. Add extra white/transparent background to make it at the thumbnail ratio : 200x120 so 40 pixels on the right and the left on the original image so it’s centred
3. Reduce the image size from 200*120 to 100*60.

Answer 1

You can set the image as a background to the thumbnail element, then use background-size: contain; to make sure it doesn't spill outside of the container. Here's a jsfiddle.