Tag Archives: pictures

Create thumbnails for any size image with CSS

Today I have been trying hard to make nice thumbnails out of some full sized pictures. The main problem was that the pictures were of different orientations and the thumbnails needed to be squared and dynamically made. So in order to have nice centered thumbnails hard-coded measurements were out of question.
This solution takes every picture resizes it to fit the lowest width or height value, then crops the central area of the picture resulting in nice-looking squared thumbnails. And the plus is that they work nicely on any kind of pictures, even the odd-sized ones.

In order to pull this of one will need a container that will hold the thumbnails as background.
Here is a quick example code:
HTML:

Thumbnail:
<div class="thumb"></div>
Full image:
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Skyline_oklahoma_city.JPG/320px-Skyline_oklahoma_city.JPG" alt="">;

CSS:

.thumb {
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Skyline_oklahoma_city.JPG/320px-Skyline_oklahoma_city.JPG');
}

Thumbnail Preview:

Original image:

A live JSFiddle can be previewed here: jsfiddle.net/XQ4mt