apache-flexcomponentsflex-spark

Flex Spark Image Resize to fit container

I'm using the following code to load an image to the screen:

<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            width="100%" 
            height="100%">

    <s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
        <s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
        <s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="@Embed('assets/img/q3/q3c1all.png')"/>
       ....
       ....
    </s:VGroup>

</s:Scroller>

In the attached image, it has three images 1. Builder view 2. final design (what designer expects) 3. rendered output (what users will see)

Because of the scaleMode letterbox, there is lots of space above and below image is blanked. And this breaks out the layer. Can someone suggest how can I make the out put looks like design preview (titled Requirement)

How to scale the image proportionately without distorting (like its done in CSS).

reference image

Solution

  • To those who struggle with this issue - the solution is to use which will give you full control over the bitmap. One thing to note is - if you are planning to use interaction / events with the image, wrap it inside a container and add click event to it.

    I dont know if this is best solution, but it worked for me :)