Cropped thumbnail from larger image?

[anonymous_bosch]

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.

[Ingolme]

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.

[davej]

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.

 

http://www.w3schools.com/tags/canvas_drawimage.asp

 

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage3

[dsonesuk]

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 December 2, 2014 by dsonesuk