Jump to content

Cropped thumbnail from larger image?


anonymous_bosch
 Share

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...