Pure CSS image thumbnails

Question

I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).

What I'd like to find are some magical HTML markup and CSS rules that will

1. Allow the images to be included in normal <img> elements
2. Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
3. Not require JavaScript or specific knowledge of each image's actual dimensions

I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:

<div class="thumb">
    <img src="360x450.jpeg">
</div>

and CSS:

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

This attempt breaks in a variety of ways:

1. Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.

2. Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.

3. But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.

If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.

Thanks for any help or pointers you can provide!

Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.

Answer 1

You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.

Live Demo

• contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.

• cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.

Answer 2

Possible, probably.

Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.

The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.

There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.

Here's a tut on using ImageMagick to do thumbnails.