CODEWITHSUNDEEP
jqueryimageresizeaspect-ratio
usertest
usertest

Reputation: 27628

Resizing an image

The code below works very well for resizing an image by aspect ratio by height and I can also create a separate function by width. But i'm not always sure if an image will need to be shrunk by height or width.

For example if the space that the image needs to be resized into is 100 width and 100 height and an image is 150 by 90 then its the width that would need to be shrunk. If the image is 80 by 160 then the height would need to be shrunk.

So what i'm asking is how could the code below be modified so it shrinks an image by aspect ratio to fit parameters of both width and height? Thanks.

jQuery.fn.resizeHeightMaintainRatio = function(newHeight){
if (this.aspectRatio == undefined) 
this.aspectRatio = parseInt($(this).width() / $(this).height());
$(this).height(newHeight); 
$(this).width(newHeight * this.aspectRatio);
}

I've edited the code yet again, since on further inspection neither my updated version nor Dan's seemed to work properly. The aspect ratio was lost so here's yet another. I've tried it on one image and so far so good. Here it is, 

        jQuery.fn.resizeMaintainRatio = function(newHeight, newWidth){
            widthRatio = parseInt($(this).width() / newWidth);
            heightRatio = parseInt($(this).height() / newHeight);

            if(heightRatio > widthRatio)
            {

                this.aspectRatio = parseInt($(this).css("width") / $(this).css("height"));

                $(this).css("height", newHeight);
                $(this).css("width", newHeight * this.aspectRatio);

            }
            else{

                this.aspectRatio = parseInt($(this).css("height") / $(this).css("width"));

                $(this).css("width", newWidth);
                $(this).css("height", newWidth * this.aspectRatio);

            }

        }

NOTE AGAIN: after further use the above code works very strangely, try this instead - http://plugins.jquery.com/project/kepresize

Upvotes: 2

Views: 1011

Answers (3)

Dan McGrath
Dan McGrath

Reputation: 42008

The following code will work out which side is needs to be scaled (works with non-square boxes, which simply checking width vs height won't work for) and scale according to that.

It will also enlarge the image if it is smaller than the newWidth*newHeight box. If you do not want it to enlarge, where I switch the ratios, check if width OR height is > 1 then and only then do the scale.

Disclaimer: The code has not been run, but the concept should be correct.

EDIT Updated with OP's fixes.

jQuery.fn.resizeHeightMaintainRatio = function(newHeight, newWidth){
   widthRatio = parseInt($(this).width() / newWidth);
   heightRatio = parseInt($(this).height() / newHeight);
   if(widthRatio < 1 && heightRatio < 1){
      widthRatio = heightRatio;
      heightRatio = widthRatio;
   }
   if(widthRatio > heightRatio){
      $(this).width(newWidth); 
      $(this).height(newHeight / widthRatio);
   } else
   {
      $(this).height(newHeight); 
      $(this).width(newWidth / heightRatio);
   }
}

Upvotes: 3

nanobar
nanobar

Reputation: 66315

There's no accounting for the amount of copy and pasters out there eh! I also wanted to know this and all I saw were endless examples of scaling width OR height.. who would want the other overflowing?!

  • Resize width AND height without the need for a loop
  • Doesn't exceed the images original dimensions
  • Uses maths that works properly i.e width/aspect for height, and height*aspect for width so images are actually scaled properly up and down :/

Should be straight forward enough to convert to javascript or other languages

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Source.Width;
    double srcHeight = img.Source.Height;

    double resizeWidth = srcWidth;
    double resizeHeight = srcHeight;

    double aspect = resizeWidth / resizeHeight;

    if (resizeWidth > maxWidth)
    {
        resizeWidth = maxWidth;
        resizeHeight = resizeWidth / aspect;
    }
    if (resizeHeight > maxHeight)
    {
        aspect = resizeWidth / resizeHeight;
        resizeHeight = maxHeight;
        resizeWidth = resizeHeight * aspect;
    }

    img.Width = resizeWidth;
    img.Height = resizeHeight;
}

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129782

You'd have to check for $(this).width() > $(this).height() When true, call the width-version of that code, otherwise call that exact version.

Upvotes: 1

Related Questions