# Thread: Resize image proportionally

1. ## Resize image proportionally

Hello,
I do not use JavaScript a lot so I do not know enough to create the script myself I needed
I searched the internet, but I have not found a script doing exactly what I need
I have a max size in height and a max size in length.
I upload an image, then scaling is done as follows:
I take the greatest value as a parameter (height or length), then the other parameter I is proportionately.
Example: I have an image of size H: 230 L: 300
I take the highest value, therefore, L: 300
The max size to meet after resizing:
H max: 100, L max: 100
300>> will become>> 100
230>> proportion>> X
X = (100 * 230) / 300.
After I confirm the registration of the image on the server
You see what I do? He commend someone could help me create this script please?
Here's what I did as early
var resize = function(img, maxh, maxw) {
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// hauteur est le problème
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// largeur est le problèm
if (img.width > maxh){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};

2. If you're doing this with JavaScript, it's pointless because you're still downloading a bigger image than is necessary. You need to resize it on the server and provide the resized image to the browser. With PHP you can do it like this:

PHP Code:
```     \$maxwidth = 480; // largest allowed width    \$maxheight = 480;  // largest allowed height    list(\$width, \$height, \$type) = @getimagesize('someimage.jpg');    // \$width and \$height are the dimensions of the image    if (\$maxwidth < \$width && \$width >= \$height) {      \$thumbwidth = \$maxwidth;      \$thumbheight = (\$thumbwidth / \$width) * \$height;    }    elseif (\$maxheight < \$height && \$height >= \$width) {      \$thumbheight = \$maxheight;      \$thumbwidth = (\$thumbheight /\$height) * \$width;    }    else {      \$thumbheight = \$height;      \$thumbwidth = \$width;    }  ```
So now \$thumbheight and \$thumbwidth contain the values for the new dimensions of the image, with the same aspect ratio. You can then generate the actual image with PHP's image functions, so the whole function would be:

PHP Code:
```   function createThumb(\$img) {    \$maxwidth = 480;    \$maxheight = 480;    list(\$width, \$height, \$type) = @getimagesize(\$img);    if (\$maxwidth < \$width && \$width >= \$height) {      \$thumbwidth = \$maxwidth;      \$thumbheight = (\$thumbwidth / \$width) * \$height;    }    elseif (\$maxheight < \$height && \$height >= \$width) {      \$thumbheight = \$maxheight;      \$thumbwidth = (\$thumbheight /\$height) * \$width;    }    else {      \$thumbheight = \$height;      \$thumbwidth = \$width;    }    \$imgbuffer = imagecreatetruecolor(\$thumbwidth, \$thumbheight);    switch(\$type) {      case 1: \$image = imagecreatefromgif(\$img); break;      case 2: \$image = imagecreatefromjpeg(\$img); break;      case 3: \$image = imagecreatefrompng(\$img); break;      default: return "Tried to create thumbnail from \$img: not a valid image";    }    if (!\$image) return "Image creation from \$img failed for an unknown reason. Probably not a valid image.";    else {      imagecopyresampled(\$imgbuffer, \$image, 0, 0, 0, 0, \$thumbwidth, \$thumbheight, \$width, \$height);      imageinterlace(\$imgbuffer);      \$output = imagejpeg(\$imgbuffer, "imagethumb.jpg", 80);      imagedestroy(\$imgbuffer);      return \$output;    }  }  ```
Still, if you really need to do it with JavaScript, I used this function:

Code javascript:
``` function resize(image) { // image is a reference to an <img> element
var x = 800, // max width
y = 600, // max height
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
image.width = imageWidth;
image.height = imageHeight;
}```

3. Hello everyone
My code upload it works well.
I can not insert your function in my code.
For cons, the code that you provided me with answers exactly what I want.
If all goes well, he's going to stay as how to rename the file

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•