scaling an image proportionally without knowing dimensions

Question

I have a script the retrieves remote images from various URLs. The width and height are unknown variables.

I have them displaying on my page and I'm reducing the height to 55px for each. However, the images that are very wide (banners, etc.) are displaying at their full width.

I can't constrain the width and height because I'll distort the image. Does anyone know a creative solution that will proportionally scale these images so they don't exceed 55px(h) AND 75px(w)?

p.s. I've tried getimagessize() in php, but the functions takes way too long to complete

Thanks!

actually I did something like this in php but I used getimagesize and something like the answer below. what do you mean takes way too long to complete? please be more specific - does the solution has to php based or can be javascript based (like the nice answer below).
and another small thing: if you do use php to resize you can cache re resized image on the server side so the function runs only one for each picture (if (!$minipic) then cache else: return $minipic) — alonisser, Nov 11 '11 at 22:26
It takes too long because it uses http requests and some of the pages I'm pulling images from have 20+ images. Some requests were taking over 30 seconds. Although effective, it was too slow — Paul Dessert, Nov 11 '11 at 23:01

ZeljkoSi · Answer 1 · 2011-11-11T22:29:48.403

I had a similar problem but I was using jQuery. But I think you can use the same logic in php to calculate the image size.

    var maxWidth = 75; // Max width for the image
    var maxHeight = 77;    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height

    // Check if the current width is larger than the max
    if(width > maxWidth){
        ratio = maxWidth / width;   // get ratio for scaling image
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", height * ratio);  // Scale height based on ratio
        height = height * ratio;    // Reset height to match scaled image
        width = width * ratio;    // Reset width to match scaled image
    }

    // Check if current height is larger than max
    if(height > maxHeight){
        ratio = maxHeight / height; // get ratio for scaling image
        $(this).css("height", maxHeight);   // Set new height
        $(this).css("width", width * ratio);    // Scale width based on ratio
        width = width * ratio;    // Reset width to match scaled image
    }

Hope this is of any help.

Bah I just realized I brain farted, unknown image size. Disregard the whole thing

score 1 · Answer 2 · edited May 23 '17 at 12:21

and hey you could always use css to do that! like this answer explains, but you'll have avoid supporting ie6 and maybe ie7 for this feature (you could use conditional comments for resizing with javascript or serverside php script in this scenario)

by the way the above answer does work! but you should add the img programtically and the get the image height and width straight from the object like this and then run the resize function above:

   var rimg = new Image();
   rimg.src = "yourimageserverurl";
   var original_height = rimg.height;
   var original_width = rimg.width;
   start the resize function on rimg..

scaling an image proportionally without knowing dimensions

2 Answers2

Linked