Small bug when I resize image proportionally using jquery. -

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

hi guys.

the problem i'm undergoing that,

when resize images, resized more once believe. 

for example,

i uploaded square image, result rectangle. 

when wrong result comes, refresh page f5 key, , square.

only height og resized image problem.

below code used resize 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 believe resizing ratio ( i.e => hei *= maxw / wid; ) applied several times when resizing height of images.

please give me wisedom!!!

it appears part of problem looking @ image's height , width in $(document).ready() , images may not loaded yet means height , width may not yet valid. when hit reload, images come browser cache , loaded faster , may ready in $(document).ready() after reload.

if these images in original html of page (and not inserted dynamically), can trigger resize function $(window).load() instead , images loaded when triggers.

in addition, can constrain setting of height , width longest side - don't have set both. setting 1 dimension allow browser resize other , maintain original aspect ratio. if max height , max width same, can simple this:

function thumbnail_resize(obj) {     var maxdimension = 50;     var width = obj.width();     var height = obj.height();     // if either dimension big, make longer 1 smaller     if (math.max(width, height) > maxdimension) {         if (height > width) {             obj.height(maxdimension);         } else {             obj.width(maxdimension);         }     } }