Page 1 of 1
Howto crop an image given in an <img /> tag?
Posted: Fri Jun 12, 2009 4:36 pm
by jl2424
Given an image as
I would like to generate a thumbnail image which is 85x85 pixels. I already tried to do it with CSS so that I put the given
into a DIV and set overflow:hidden but this does not really work well. The img-Tag is generated by Wordpress and returns a user-picture. For the blog design I need the thumbnail as 85x85 px, but I do not know before if the user uploads a picture with width>height or height>width.
Re: Howto crop an image given in an <img /> tag?
Posted: Fri Jun 12, 2009 4:54 pm
by requinix
You need PHP.
(If you're using CSS then you're not thumbnailing anything: you're displaying the exact same image in a smaller space. The user has to download the entire image and that defeats the purpose of a thumbnail.)
There's plenty of stuff around here and especially on
Google about how to use PHP to make a thumbnail of an image.
The thumbnailing happens when someone tries to visit a certain URL, like
Code: Select all
http://example.com/thumbnailUser.php?user=jl2424
thumbnailUser.php looks up the user's avatar and outputs a thumbnail. This method sucks but is the easiest.
The best method would be to create a thumbnail of the avatar when it gets uploaded. Then you just point the <img> to the location of the thumbnail.
Code: Select all
http://example.com/images/users/thumb_jl2424.jpg