scriptygoddess

13 May, 2008

Proportional Scaling Calculator

Posted by: Jennifer In: Javascript|Scripts

I'm sure this has been done before since it's pretty simple – I just couldn't find it quick enough when I needed it. And since it is so simple, it was easier to just create my own personal little calculator than dig around, find one, bookmark. (or worse yet, do the math on a little sticky note next to my computer) ;P

This calculator will let you enter in the original width and height of an image (or document, video or whatever). Then you enter the width (or height) of the size you need it scaled to (down or up). And it will tell you what the other side needs to be.

For example: I have an 800×600 image – I need it scaled down to fit in a 256 width area… what height will I need to make it? This tool will answer your question.

Proportional Scaler Calculator

3 Responses to "Proportional Scaling Calculator"

1 | Hunter

May 14th, 2008 at 6:23 am

Funny. I did the same thing. Easier to build it than find it and bookmark it. Of course, mine doesn't look nearly as pretty as yours, but since I'm the only one that uses it, it works for me.

2 | cyberante

June 12th, 2008 at 12:19 pm

How easy would it be to add one more element to this lovely tool – The percentage?

I would like to see it as a result of the calculation and as an amount you could specify to get both the width and height. Used for figuring parts of a larger area, this would make this tool a fully functioning proportional scale.

Thanks for making it available.

3 | davydog

July 22nd, 2008 at 6:42 pm

Thanks for writing this cool script!

I'm not clever at all with Javascript so unfortunately the little fix I made to it (described below) took me all day to figure out. (I should've paid more attention in math class.)

I couldn't get my mind off the fact that filling in the New Height value while leaving the New Width blank produced a result that was incorrect. The answer, of course, came as one of those "doh!" moments once I finally got it.

Here are the 3 lines I finally zeroed in on:

var ratio = origwidth/origheight;
newheight = newwidth/ratio;
newwidth = newheight/ratio;

To get an accurate new width, you have to multiply it by the ratio:
newwidth = newheight*ratio;

Hope this helps. I also would appreciate it–since I'm weak both in math and Javascript–if someone points out any errors and/or omissions I might have made with this fix.

You can find a working example of my edited version of the Proportional Scaler script here: http://www.pixeljax.com/

Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

bluehost