anonymous_bosch Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
Ingolme Posted December 2, 2014 Share Posted December 2, 2014 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 More sharing options...
davej Posted December 2, 2014 Share Posted December 2, 2014 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 2, 2014 Share Posted December 2, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now