The ability to proportionally scale an object to fit within, or fill a region is a powerful technique with a variety of applications. We used this approach on Logobama to allow users to upload any size photo and automatically scale it to fit within the available space, before saving out an image from Flash.
The source code for this post includes a ScalingImage class that loads an image and responds to any stage resize event by proportionally scaling the image to fill the stage. Check out the demo and try resizing your browser.
The code behind a proportionally scaled full screen image is fairly straightforward:
// set image dimensions to match stage;
image.width = stage.stageWidth;
image.height = stage.stageHeight;
// choose the larger scale property and match the other to it;
( image.scaleX < image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;
Since scaleX and scaleY are percentages, it’s just a matter of figuring out which property is larger and making the two equal.
By swapping the scale comparison from “greater than” to “less than”, the object will scale proportionally to fit the larger of the two dimensions given. This kind of calculation is handy when you need to fit items of variable dimensions into a fixed space, such as the flickr photos on the Authenticity Book Axiom Gallery.
// choose the smaller scale property and match the other to it;
( image.scaleX > image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;
There are many applications for this technique, from creating image thumbnails to building a liquid grid layout. We’d love to see more examples of this approach in action, so feel free to leave a link or two in the comments.
Lovely formula, you sir, just saved me a headache!
9:04 am / July 9th, 2008
Hello Shaun. How can I use this for a slideshow component with the event resize? When I use this without the event resize the object goes to the space and when I use this with event resize I can’t get the proportional scale.
Can you help me?
3:29 pm / August 8th, 2008
I am a newbie so please excuse the question but I am having trouble with the source files. When I open the scaling-image.fla file and try to preview the html, it is always blank. Therefore when I publish it I get a blank screen. I really need to be able to develop the site in flash with this code to resize the background image, but I can not seem to get it to publish. The swf works just fine. Any advice would be helpful
Thanks!
10:04 am / October 21st, 2008
Hey great classes!!! I’m making an honest effort to stop using AS2. I know that I could maybe Mickey Mouse my problem by drawing in the a scalable AS2 swf into into a AS3 swf. The question is how do I set the image as the bottom root layer, so the image doesn’t sit on top of all the other layers? Thanks ~ be5iK.inK
8:28 pm / November 18th, 2008
This is great and has saved me a lot of effort. I am trying to use the function to load a bgrd image for every section of my site which is working fine. The only problem is that when I call the unload function it leaves the bitmap on the screen. Some of my pages have no bgrd image but the previous one still remains. So far all I have manged to do is change the unload function to remove the actual child but then it errors on resize. Can you make any suggestions as to how I can remove the image each time? Cheers
6:54 am / January 16th, 2009
This is great thanks, a very elegant solution!
11:32 am / January 26th, 2009
[...] scaling made easy! By Simen I’ve been doing a lot of scaling of images this week and I found this great tip on the Substance [...]
2:24 am / February 12th, 2009
Great post, but I would like to tween the proportional scaling, which means I would need to determine the scaleX and scaleY BEFORE adjusting the width and height. DO you know the forulma for that?
8:47 am / March 2nd, 2009
I like your Artikel but Don´t Like Your Color Comibnation in Your Side.
It’s too hard for my eyes.
Please, Change it.
4:17 pm / March 30th, 2009
Great solution! I’m kind of a newbie to AS3, so I was wondering if it would be possible to make the image actually bigger than the stage so that I can scroll u/d and l/r using the mouse position ( kind of a parallax effect)
11:55 am / July 27th, 2009
How would you stop the resizing when the stage is minimized to an specified size?
5:09 pm / August 5th, 2009
Thanx for a great class. It saved me some time.
2:51 pm / October 21st, 2009
Thanx you save my time
3:06 pm / October 28th, 2009