Cropped thumbnails

[lj2007]

Hi,

I want to make some thumbnails out from some larger images. However i dont want to shrink the image i just want to show the central 100px x 100px - i.e. crop the image or only show a portion of it...

Is this possible?

Thanks!

[vincevincevince]

I'd use DIV first of all, and use that to trim away the outside.

To achieve the trimming, set for the DIV:
overflow:hidden
Set your widths as you need them for the DIV:
width:100px;height:100px
Finally, set the image as a background:
background-image:url('image.jpg');background-position:-200px -200px;

Notice the background-position:? That will move the background around inside.

[lj2007]

Ok,

but what if i have lots of images that are all different sizes and want to get the central 100px of each of them - is there a way to specify that?

[vincevincevince]

background-position:middle center;
I think!

[sifredi]

I don't know if the moderators will allow this, but there is a good example and code to get you started on this if you search google for "lightweight image gallery". The trick is to add a little unobtrusive javascript that pulls the <img> source into a css background rule and then present it in a cropped way as described above.

[Xapti]

background-position:50% 50% works I think. Something like that. The "middle center" thing already mentioned might do the same.

If you wanted you could both resize the image somewhat, AND crop it somewhat. I assume you know how to do it, so I won't bother giving an example.

And I woudlnt' really consider a javascript which removes images, and changes them to background images in other elements then centers them to be very unobtrusive. It would create noticible differences for browsers which do not have the javascript enabled.
Hell, if you wanted to use javascript, you don't need to change the image tags to background images, you could just center the images using javascript.

[edited by: Xapti at 2:39 am (utc) on Aug. 27, 2007]

[alexdunae]

If you have a lot of images I'd watch out. If you have 20 images that are each 400KB at full size they will all have to be loaded (c. 8MB!). If you had proper 100px x 100px thumbnails at 10K each you would only be looking at 200KB to download.

There are plenty of light-weight scripts that can do this at runtime on the server - I have one that allows me to call an image like this:

/images/myimage.jpg?thumb

and it will be resized, cached and displayed. I can send you a link to the code if you like.