使用jquery按比例调整图像大小时的小错误。

Question

( 10 reputation for showing images??... really?...)

Hi guys.

The problem I'm undergoing is that,

when I resize images, they are resized more than once I believe.

For example,

I uploaded a square image, but the result is rectangle.

When the wrong result comes, I refresh the page with F5 key, and they look square.

only height og the resized image is the problem.

Below is the code I used to resize those images.

function thumbnail_resize(obj) {
    var maxW = 50;      var maxH = 50;
    var wid = obj.width();
    var hei = obj.height();

    if( wid > maxW ) {
        hei *= (maxW / wid);
        wid = maxW;
    }
    if( hei > maxH ) {
        wid *= (maxH / hei);
        hei = maxH;
    }
    obj.attr('width', wid);
    obj.attr('height', hei);

    delete maxW, maxH, wid, hei;
    return;
}

Currently I believe the resizing ratio ( ie => hei *= maxW / wid; ) is applied several times when resizing the height of those images.

Please give me some wisedom!!!

Answer 1

Firstly if you want to keep aspect ratio, you don't need to apply height and width at the same time:

function thumbnail_resize(obj) {
    var maxW = 50;      var maxH = 50;
    var wid = obj.width();
    var hei = obj.height();

    if ( wid > hei ) {
       if( wid > maxW ) {
            obj.attr('width', maxW);
       }
    } else {
        if( hei > maxH ) {
            obj.attr('height', maxH);
        }
    }

    return;
}

You should see this article about image loading and manipulating them on load. You can't simply expect it to work on document.ready, especially in IE.

Answer 2

It appears that part of your problem is that you are looking at the image's height and width in $(document).ready() and the images may not all be loaded yet which means their height and width may not yet be valid. When you hit reload, the images will come from the browser cache and they will be loaded much faster and thus they may actually be ready in $(document).ready() after the reload.

If these images are all in the original HTML of your page (and not inserted dynamically), then you can trigger your resize function with $(window).load() instead and the images will all be loaded when that triggers.

In addition, you can constrain your setting of the height and width to only the longest side - you don't have to set both. Setting just one dimension will allow the browser to resize the other and maintain the original aspect ratio. If your max height and max width are the same, it can be as simple as this:

function thumbnail_resize(obj) {
    var maxDimension = 50;
    var width = obj.width();
    var height = obj.height();
    // if either dimension is too big, then make the longer one smaller
    if (Math.max(width, height) > maxDimension) {
        if (height > width) {
            obj.height(maxDimension);
        } else {
            obj.width(maxDimension);
        }
    }
}