Image Display

[ziycon]

I upload images of variying sizes for articles but i have a restricted space to show them on, i have 130px wide by 78px high but images can be much bigger is size, how can i display just a section of the image in the 130x78 space without the need to resize and squash the image, for example the below black part is the full image but i only want to display the red box on the article page?

[Ciary]

you will probably need to use an image library: GD is the most common, but if you need something more powerful, i should use imagemagick. you better do no use imagick cause it is way to hard to install.

[Markus]

An HTML/CSS option:

<div style="width: 10px; height: 10px; overflow: hidden;">
     <img src="http://img80.imageshack.us/img80/3654/imgz.jpg" />
</div>
 

[ziycon]

@Markus
What does the overflow attribute do?

[Ciary]

cuts of everything beyond the border of your element. you'll have to give it a specific width and height though

also, you can position the image to eg -10px to cut of on the left and top side of the image

(actually, this method is better then php. i just forgot the possibilities of html/css for a moment :-s)

[ziycon]

Cool, i'll give this a shot and let you know. Thanks.

[Atli]

@Ciary
Actually, it's not. But it is a lot easier and quicker to implement.

The main problem with this method (as I see it) is that you are sending a lot more data than you have to. You are sending parts of images that will never be seen.
PHP could cut of the parts you don't need and just send the rest.

Also, this method relies on the browser to position the image and show the parts you want seen. Browsers tend to disagree on how to interpret your pages, which could lead to your image being displayed incorrectly in certain browsers.
Using PHP, there would be nothing for the browser to misinterpret.

If this is some large-scale project of major importance, I would go with the PHP method.
If it's not a high priority project, the HTML/CSS method is ok.