A nice thing about using images in Flex you never have to worry about maintaining the proper aspect ratio. If you hard code a width or height would otherwise break that aspect ratio Flex inevitably ignores it and uses blank pixels to fill the extra space created around it. However, If you need a container to size based on a percentage AND constrain to say a 4:3 ratio it turns out there’s no way to make this happen (as an old mentor would say) “auto-magically”. Of course there’s an relatively easy way to achieve by binding an container to its own height or width property and adjusting the value as such:

Here an example where we want the height to take up the maximum space available and the width to adjust itself so that the resulting box maintains the 4:3 ratio.

<mx:Canvas height="100%" width="{(this.height * (4/3))}">

You could do the converse as well..but make sure you use division here since its the ratio is of width to height and we’re dealing with height first now.

<mx:Canvas height="{(this.width / (4/3))}" width="100%">

ian News