Javascript Can't Do Math?

[Renegade605]

I'm building a script to get the dimensions of an image and resize it if it's too big, but I've encountered a problem. The relevant code follows (executed in the load event of the img):

var theimg = this.getElementsByTagName('img')[0];console.log(theimg);console.log("Img Completed!");console.log("64/2 = " +64/2);while ((theimg.width > 220) || (theimg.height > 220)){	console.log("Img too big! (" +theimg.width +"x" +theimg.height +") Reducing 50%");	theimg.width /= 2;	theimg.height /= 2;}while ((theimg.width > 110) || (theimg.height > 110)){	console.log("Img too big! (" +theimg.width +"x" +theimg.height +") Reducing 5%");	theimg.width *= 0.95;	theimg.height *= 0.95;}while ((theimg.width > 100) || (theimg.height > 100)){	console.log("Img too big! (" +theimg.width +"x" +theimg.height +") Reducing 1%");	theimg.width *= 0.99;	theimg.height *= 0.99;}console.log("Img fits! (" +theimg.width +"x" +theimg.height +")");

The img I'm giving it is 256x64. Except this is what the console logs:

Img too big! (256x64) Reducing 50%Img too big! (128x16) Reducing 5%Img too big! (121x15) Reducing 5%Img too big! (114x14) Reducing 5%Img too big! (108x13) Reducing 1%Img too big! (106x12) Reducing 1%Img too big! (104x11) Reducing 1%Img too big! (102x10) Reducing 1%Img fits! (100x9)

I don't know what strange universe JavaScript is running in, but 64 divided by 2 is most certainly not 16. I've tried logging various math operations (see line 4) and they all return the correct result (2/2 = 1, 32/2 = 16, 64/2 = 32), so why does it not turn out right in this situation?

[jeffman]

When you change one dimension of an image element (as distinct from a Javascript image object), the other dimension changes in proportion automatically. So when you change the height explicitly, it's getting changed for the second time, not the first.Since the 50% reduction only happens once, and is followed by very small reductions, the double-reduction in the subsequent operations isn't noticeable. A pixel gets rounded to a pixel.A strange way of changing an image size, BTW. I hope you're just experimenting.

[stockton]

When you change one dimension of an image element (as distinct from a Javascript image object), the other dimension changes in proportion automatically. So when you change the height explicitly, it's getting changed for the second time, not the first.Since the 50% reduction only happens once, and is followed by very small reductions, the double-reduction in the subsequent operations isn't noticeable. A pixel gets rounded to a pixel.A strange way of changing an image size, BTW. I hope you're just experimenting.

Please tell me how you would resize it.I would like to take an image and resize it to the size of the current window, if possible.

[jeffman]

Please tell me how you would resize it.I would like to take an image and resize it to the size of the current window, if possible.

That's very easy. In CSS, set the width/height to 100% This method has the advantage that the image will resize automatically if the user resizes the window.

[justsomeguy]

That's definitely a new way to do a resize. It might be faster to figure out which dimension needs to be resized, and by how much (ratio), then resize the other dimension by the same ratio.

[Renegade605]

When you change one dimension of an image element (as distinct from a Javascript image object), the other dimension changes in proportion automatically. So when you change the height explicitly, it's getting changed for the second time, not the first.Since the 50% reduction only happens once, and is followed by very small reductions, the double-reduction in the subsequent operations isn't noticeable. A pixel gets rounded to a pixel.A strange way of changing an image size, BTW. I hope you're just experimenting.

Alright, thanks, I didn't realize. Although, what if you wanted to resize it out of proportions on purpose? I don't, but that's a though.Anyway, why is this a strange way of changing the image size? It was the most obvious way that I could see.How would you suggest changing the image size?EDIT: Whoops didn't read the other posts. I haven't noticed that the while() loops really delay it at all, although I may test out your method anyway.Cheers

[jeffman]

var ideal_width = 100;var ratio = ideal_width/image.width;image.style.height = (image.style.height * ratio) + "px";image.style.width = ideal_width + "px";Since an image element automatically resizes proportionately, this is overkill. Simply assigning a fixed value to one dimension is enough. But this technique will work for any page element. Not every element has a width or height property, but every element does have style attributes.To alter the proportions, change the value of ratio.

[Renegade605]

I did end up doing something like that. Slightly different code since I want whichever dimension is naturally larger to be 100 or smaller.

if ((theimg.width > 100) || (theimg.height > 100)){	console.log("Img too big! (" +theimg.width +"x" +theimg.height +")");	var dimension = ((theimg.width > theimg.height) ? theimg.width : theimg.height);	ratio = dimension / 100;	console.log("Ratio is " +ratio);		theimg.width /= ratio;}