Cropping Photo, with out photoshop 1

[zbphill]

I want to crop a picture (.jpg) using HTMl, CSS, Javascrip, ect.
I know how to in photoshop, and all the other programs.

I have clients uploading pictures(random height and width) and the pictures get displayed on the web, but I want them a to be all to be display a certain size with out stretching the picture.

Any Idea, tutorials, or programs out there.

thanks
Zach

 

[audiopro]

If you have access to PHP, there is a useful tool called the GD library which can do just what you want.

Keith

http://www.studiosoft.co.uk

 

[mkrausnick]

Put each picture in its own floated DIV set to the dimensions you want and specifying "overflow:hidden":

<div style="width:200px; height:200px; overflow:hidden; float:left; border:thin solid" 
[&nbsp;]
</div>
<div style="width:200px; height:200px; overflow:hidden; float:left; border:thin solid" 
<img src="pic2.jpg" />
</div>
<div style="width:200px; height:200px; overflow:hidden; float:left; border:thin solid" 
<img src="pic3.jpg" />
</div>
<div style="width:200px; height:200px; overflow:hidden; float:left; border:thin solid" 
<img src="pic4.jpg" />
</div>
<div style="width:200px; height:200px; overflow:hidden; float:left; border:thin solid" 
<img src="pic5.jpg" />
</div>

The top left portion of each picture is displayed and the remainder is cropped. Of course you'll want to specify the style in the STYLE section, not inline as I did here.

The downside is that the entire picture is served even though only part is displayed, so extra unnecessary bandwidth is consumed.

Mike Krausnick
Dublin, California

 

[bam720]

zbphill,
I just read this article not too long ago... "15 CSS properties you never use..."

http://www.seomoz.org/blog/css-properties-you-probably-never-use

And the first one is:

clip: rect(5px, 40px, 45px, 5px)

with a simple example here:

http://www.ibloomstudios.com/article8sample1.php

This can make all of you images the same size, but not sure if its exactly what you

 

[traingamer]

From the same article referenced above:

The CSS clip property has to be one of the least used properties in CSS. This is probably because no one really knows when to use it, it doesn't appear to be supported in Internet Explorer, and some people use it incorrectly.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[traingamer]

Although, on testing, it seems fine in IE6 as long as you don't use the commas.

clip: rect(5px 40px 45px 5px)

 

[kaht]

I loaded the test page from the article in IE7 and it worked as well.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]