How do i fit my image to a defined length

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
adsegzy
Forum Contributor
Posts: 184
Joined: Tue Jul 28, 2009 9:26 am

How do i fit my image to a defined length

Post by adsegzy »

Hello Friends,

Pls i need your help. I need to echo images that are uploaded by members of my site. In the space provided for the image to display is 200px by 200px. but these measurement is stretching all the images to 200px by 200px even if the uploaded image is 200px by 50px. What i want is that i want the image to be either 200px maximum in hight or 200px in width, any that come first and for the image to still maintain it's ratio.

Please help me out.

Regards,
adsegzy
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

Re: How do i fit my image to a defined length

Post by PHPHorizons »

Hello adsegzy,

This one is a bit different than the horizontal deal because it does require a programatic response. There is a php method. You can constrain the image size at the time they upload the image. This is preferred above all other methods and is highly recommended.

If that option is not possible for you, then you can use javascript to programatically check the width/height of the image. Then, using a bit of math, you can determine by what amount the image needs to be resized to fit the space available whilst maintaining aspect ratio.

That is tricky to do because you must wait for the image to load ***completely***. Otherwise, the image appears to be much smaller to the javascript. I.e., it will have dimensions of 0x0 until it is fully loaded. Therefore, you must use an Event to time the javascript execution. That means that there can and will be a small amount of time where the image will flash full size before being resized. You could mitigate that by applying display: none to the image until it is checked by the javascript and then removing that style. The javascript method is vastly inferior to the previous method of checking the image size at the time of it being uploaded and editing the image right then and there.

Cheers
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: How do i fit my image to a defined length

Post by greyhoundcode »

You might also want to consider using GD functions to create an appropriately resized copy of the image on the server (see imagecopyresampled() and similar).

That way you could save bandwidth (yours as well as the user's) by serving a 200x200 pixel image rather than a 1024x1024 pixel image - or whatever the given sizes are - that then has to be rescaled client-side.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: How do i fit my image to a defined length

Post by Jonah Bron »

I'm not sure if it would work, but you might try using the CSS max-width/height properties.
Post Reply