Flex 4 Image Fill

I have a controls.Image that I put开发者_运维问答 in my Flex4 AIR App.

I set it to x=0, y=0. Width=100%, Height=100%.

The problem with this, is that The source image I am using does not fit the whole app screen. The actual controls.Image covers the entire screen, but the source image contained in the controls.Image does not fill the entire controls.Image height/width.

Is there any way to "fill" the entirety of the controls.Image with the source? I am not worried about warping the source image, I would just like to fill the entire controls.Image no matter what the height/width of it are.

I cannot find the tool to do so.. anyone recommend tips? I cannot find anything related to "FillMode" or similar and have been searching for awhile now.

Thanks

If by 'controls.Image', you mean mx.controls.Image, which is technically a Flex 3 component, but is applicable in Flex 4.1 and earlier, you want to set maintainAspectRatio to false, and make sure that scaleContent is true (which is the default value).

On the other hand, if you are using Flex 'Hero' SDK (Flex 4.5), which introduces a native spark image component (spark.components.Image), you'll need to set scaleMode to BitmapScaleMode.STRETCH, and make sure fillMode is set to BitmapFillMode.SCALE (which is the default value).

AS3 Documentation:

mx.controls.Image (Flex 4.1 and earlier)

spark.components.Image (Flex 4.5 "Hero")

All of these tips are assuming that the blank parts of the image are transparent.

-You could put your image in a BorderContainer, and set the background color of the container.

-You could create a bitmap of a certain width or height, then fill with a background color (bitmap.fill I believe). Then copy our image bitmap data onto that.

Personally, I think the BorderContainer option is the easiest to get off the ground.