Resizing an image on the client side

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Resizing an image on the client side

Post by davidtube »

I've seen lots of similar scripts but I've not found one that quite does what I need.

My site allows user to upload pictures. When displayed I want the images to stretch to 250px in one direction, width or height depending on which is greater, and keep the aspect ratio in the other direction (without going beyond 250px).

At the minute I have just set the HTML img element to this, but it distorts the ratio.

Code: Select all

width="250" height="250"
GeXus
Forum Regular
Posts: 631
Joined: Sat Mar 11, 2006 8:59 am

Post by GeXus »

You would have to resize it in PHP... but you can't have it 250px width or height, then have the other not exceed 250px while keeping the same aspect ratio... to keep the aspect ratio you can only specify width or height to be 250px max, the other will adjust accordingly.
Rovas
Forum Contributor
Posts: 272
Joined: Mon Aug 21, 2006 7:09 am
Location: Romania

Post by Rovas »

You can make an ajax type script that loads the resized image from the server. It' s quite easy.
Other method is to hide parts of the picture using CSS.
User avatar
seppo0010
Forum Commoner
Posts: 47
Joined: Wed Oct 24, 2007 4:13 pm
Location: Buenos Aires, Argentina

Post by seppo0010 »

You can resize it on PHP, when you do the upload.
Ohterwise, using PHP when display, you can look if its width is bigger than its height or not and only use one attribute

Code: Select all

<?php
list($width, $height) = getimagesize($myimage);
if ($width > $height) $show = 'width';
else $show = 'height':
?>
<img src="<?php echo $myimage; ?>" <?php echo $show; ?>="250" />
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Post by davidtube »

Thank you. That's a good idea. I've almost solved the problem myself but got a new problem now which I'm asking about here.

I might try your idea seppo0010 as an alternative work-around for my problem. Thanks
Post Reply