View Full Version : CSS thumbnails using a large image

Feb 22nd, 2012, 07:03 PM
I'm wondering what the best way to do this would be or if it's possoble.

Currently I have a bunch of images that are either 1000px width or height (whichever is the larger side) and a page that displays a thumbnail view of those images using CSS to 'clip' the image to 240 x 240.

The problem is that the images are quite large (1000px), so in a lot of cases you can't see what the actual image looks like using the clipped portion of 240x240 since you can only see about a quarter of the image.

Is there a way without having to actually resize the images on the fly with php or something, to have CSS show a 240x240 area but scale the image somehow. For example if I had an image that was 1000x750 it would scale it down to 320x240 and then clip it to 240x240... so that you would see almost all of the images instead of just a section of a larger one?

Feb 23rd, 2012, 08:02 AM
let's see some code!

Feb 23rd, 2012, 05:01 PM
You can see the size of the image I start with and the height - width I cram it into. Try it with one of your images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />
<img src="images/Lithuanian_1600x1200.jpg" height="240px;" width="240px;" alt="" />