Jump to content

Cropped thumbnail from larger image?


Recommended Posts

I am using resized images as thumbnail links. I want the thumbnails to be 100px by 100px but I want the images to be resized so that their smaller dimension becomes the 100px edge and the other dimension gets cropped evenly from either end.

 

For example, if the "src" image is 600px wide by 800px high, I want the thumbnail image to crop to 100px wide and 100px high in such a way that the original image would show up as though 100px had been removed from both top and bottom and then the whole thing was reduced in size by 600%.

 

Here's an example of what I have so far for each image:

 

<img src="img/image01" alt="Image Title" height="100px" width="100px">

 

This is allowing me to efficiently scale the images to 100px by 100px, but they're being distorted by being forced into a square shape when most of them are rectangular.

 

Is there an easy solution I can paste into each <img> tag? I would also be open to using CSS.

Link to post
Share on other sites

There is no easy solution. You need to crop it in an image editing program.

 

The image's width and height attributes should not have "px" in them, they can only contain digits.

Link to post
Share on other sites

if you are using php http://stackoverflow.com/questions/1855996/crop-image-in-php

 

 

I don't really understand your description of what you want to do -- but a Canvas will allow you to do a number of things, such as cropping an image.

 

You take the narrowest distance of image (top/bottom OR left/right which every is narrowest) shrink it down proportionally to 100px, then crop the remaining edges so it becomes 100 x 100 square.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...