0

Hi, i've been trying to figure this out all morning with no luck, i'm trying to create a site that can dynamically resize elements depending on the size of the browser, or if someone drags and resizes the window displaying the page.

The problem i'm having right now though is getting a background image to resize while keeping it's aspect ratio, here is my code:

Stage.align = "TL";
Stage.scaleMode = "noScale";

//Site content
stretch_bar._width = Stage.width;


//Define the role of the listener
sizeListener = new Object();
sizeListener.onResize = function(){
	//Get the new dimensions of the stage:
	var stageWidth:Number = Math.round(Stage.width);
	var stageHeight:Number = Math.round(Stage.height);
		trace ("stage size is now " + Stage.width + " px by " + Stage.height + " px");

	[B]//This is what is giving me the trouble, but i don't know what i'm doing wrong[/B]
	var aspectratio = Stage.width/Stage.height;
	photo_01._yscale = aspectratio * photo_01._xscale;
	
	stretch_bar._width = Stage.width;	
}

Stage.addListener(sizeListener);

I've used google to try find an answer and got pretty close, however all that happens is that when the window is dragged down the photo squashes upwards and when the window is dragged up the photo stretches down past the end of the window :confused:

Does anyone know what i am doing wrong?

2
Contributors
1
Reply
2
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

You need to calculate the aspect ratio from the original image sizes, not the sizes of the strechable container.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.