Resize component to scale

Question

I have SampleComponent:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         resizeMode="scale">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Image source="@Embed('assets/images/soLogo.jpg')" width="100%" height="100%" scaleMode="stretch" />

</s:Group>

It features just an image that stretches to fill the whole component area, the component resizeMode is set to "scale".

I put this component into an application with the below code:

<local:SampleComponent id="sample" 
                       width="100%" 
                       height="{sample.width * 0.2961165048543689}" />

The width is set to 100% of the applications width. In my attempt to scale the component correctly I set the height to a percentage of the width.

When the application window is resized, it looks like this:

The last image here is my problem, it exceeds the bounds of the application.

• How can I have the component resize without exceeding the bounds of the parent container?
• Is there a more correct way of scaling components?

Answer 1

I think I've figured out a better way of doing this:

• Set the resizeMode of the component to scale
• Add a listener for the updateComplete event, in the listener manipulate the $scaleX and $scaleY properties of the mx_internal namespace.

Example:

<s:Group id="myContainer" resizeMode="scale">
    <!-- Some children, images etc... -->
    <s:updateComplete>
    <![CDATA[
            import mx.core.mx_internal;

            myContainer.mx_internal::$scaleX = Math.min(myContainer.mx_internal::$scaleX, myContainer.mx_internal::$scaleY);
            myContainer.mx_internal::$scaleY = myContainer.mx_internal::$scaleX;
    ]]>
    </s:updateComplete>
</s:Group>

This way is better becuase...

• It allows for not knowing the aspect ratio in advance.
• it also allows for complex layouts and many children where the ratio can change at runtime.

If used often a library function could be created instead.

Answer 2

This post answered with this library

I think you could probably also do it with something like this:

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width / ratio)}"