flash - spark Image width = 100%, height = auto

Question

How to scale the image, whatever it takes 100% width and height proportions retained? In html and css is done simply width: 100%; height: auto And in the flash image leaves margins at the top and bottom, when scaled proportionally

Here is my code:

<s:Image id="bannerImage" width="100%" useHandCursor="true" fillMode="scale" verticalAlign="middle" scaleMode="letterbox" smooth="true" smoothingQuality="high" />

That's what turns around:

Red rectangles - the space that remains when scaled as get rid of them?

Answer 1

By default Image will scale the graphics so that they maintain their aspect ratio.

You can configure this behaviour through the scaleMode property.
The default value is BitmapScaleMode.LETTERBOX
If you want the graphics to stretch, use BitmapScaleMode.STRETCH instead.

<s:Image source="@Embed('/myImage.png')" 
         scaleMode="stretch" width="100%" height="100%"/>

Answer 2

Complete code mxml:

<?xml version="1.0" encoding="utf-8"?>

buttonMode="true"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"

initialize="init()">

<fx:Script>
<![CDATA[

    import core.Application;
    import core.media.Manager;
    import flash.filesystem.File;
    import spark.components.RichEditableText;
    import spark.components.RichText;
    import flashx.textLayout.conversion.TextConverter;

    private var bannerID:String;
    private var bannerData:Object;

    // Init banner to show
    // -------------------
    public function init():void {

        // If no any banners, return
        // -------------------------
        if (Application.storage.banners == null) return;

        // Count banners
        // -------------
        var count:Number = 0;
        var banners:Array = new Array();
        for (var itemIndex:String in Application.storage.banners) banners.push(itemIndex);

        // Select any random
        // -----------------
        var bannerIndex:Number = Math.round(Math.random() * (banners.length - 1));
        this.bannerID = banners[bannerIndex];
        this.bannerData = Application.storage.banners[bannerID];

        // If banner non exists, return
        // ----------------------------
        var bannerFile:File = File.applicationStorageDirectory.resolvePath('data/banners/' + this.bannerID + '.jpg');
        if (! bannerFile.exists) return;

        // Else, banner is exists
        // ----------------------
        Manager.lazyLoad(this.bannerImage, bannerFile);     

    }

    // Open banner inside popup
    // ------------------------
    private function openBanner():void {

        // If no text data, return
        // -----------------------
        if (bannerData.text == null) return;

        // Create text object
        // ------------------
        var bannerText:RichEditableText = new RichEditableText();
        bannerText.percentWidth = 100;
        bannerText.lineBreak = 'toFit';
        bannerText.textFlow = TextConverter.importToFlow(bannerData.text, TextConverter.TEXT_FIELD_HTML_FORMAT);

        // Show popup
        // ----------
        ui.Popup.show(bannerText);

    }

]]>
</fx:Script>

<s:Image id="bannerImage" width="100%" height="100%" click="openBanner()" useHandCursor="true" fillMode="scale" verticalAlign="middle" scaleMode="letterbox"  smooth="true" smoothingQuality="high" />

Answer 3

Use BitmapImage instead of Image with scaleMode="letterbox".