Forums

realph

I've got an original image that's 200px by 200px. I'd like to show it at 100px by 100px on a webpage without scaling it down or cropping the original file in any way.

I've seen it done before, somewhere. How could I go about doing this?

Andy Staple

I believe you can use TimThumb or another script to do something like this.

http://www.darrenhoyt.com/2008/04/02/ti ... -released/

virtual

If the image is in the html you can also just give it a width and height.

<img src="images/yourimage.jpg" alt="whatever" width="100" height="100" />

realph

Thanks guys but I'm sorry, I don't think I explained myself properly. I want to take this image (300 x 224):
[attachment=1]original.jpg[/attachment]
And crop it in the code (not within an image editing program) to (300 x 150):
[attachment=0]cropped.jpg[/attachment]
The thing is the cropped image is used as a thumbnail on the front page, when clicked it brings you to another page with the original image. I don't want to have two images in different sizes, it'll make the work twice as long.

Any help appreciated!

Lynz

This seems to work pretty well:

<div style="width:300px; height:150px; overflow:hidden;">

<img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />

</div>

(of course you can externalize the CSS if you want)

Basically put the image inside a div, give the div a set height (150) and set the overflow to hidden. Then you adjust the positioning of the image to set it where you want within the div.

realph

"Lynz" said:
This seems to work pretty well:

<div style="width:300px; height:150px; overflow:hidden;">

<img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />

</div>

You're a life saver, really appreciate it. This should serve me well in future projects. Thanks!

ncmiami

What's the best method when the images are of varying sizes?

treehouse : what would you like to learn today?

Forums

[Solved] Crop Image Size