Question

So I’m loading a really big pic in this mx:Image manteinAspectRatio enabled with a height constraint and as usual it doesn’t work (Flex is definitely not for me):

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx">

        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:fill>
                <mx:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>

        <s:VGroup id="a" top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

            <s:Group id="b">

                <s:Rect id="c" top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                    <s:fill>
                        <mx:SolidColor color="#cccccc"/>
                    </s:fill>
                </s:Rect>

                <s:VGroup id="d" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                    <mx:Image id="e" source="big.jpg" maxHeight="300" maintainAspectRatio="true" />

                </s:VGroup>

            </s:Group>

        </s:VGroup>

    </s:Application>

The big.jpg has more width than height so when it’s resized the wrapping containers get the correct new height but they still have the old width.

I’ve tried to call validateNow() on every element, invalidate, callLater(), resize event, compete event… I’m a noob getting tired of AS 3.0

UPDATE:

Reading J_A_X answer I ended up with this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

        import flash.events.Event;
        import mx.controls.Image;

        private function fix(event:Event):void {

            var img:Image = event.target as Image;
            var h:uint = 300;

            img.width *= h / img.height;
            img.height = h;
            img.removeEventListener("updateComplete", fix);

        }

        ]]>
    </fx:Script>

    <s:Rect top="0" right="0" bottom="0" left="0">
        <s:fill>
            <mx:SolidColor color="#000000"/>
        </s:fill>
    </s:Rect>

    <s:VGroup top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

        <s:Group>

            <s:Rect top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                <s:fill>
                    <mx:SolidColor color="#cccccc"/>
                </s:fill>
            </s:Rect>

            <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                <mx:Image source="big.jpg" maintainAspectRatio="false" updateComplete="fix(event)" />

            </s:VGroup>

        </s:Group>

    </s:VGroup>

</s:Application>

I hope that helps another one dealing with Flex.

Answer 1

After looking at Image, it seems that it needs explicit height/width or else it won’t scale down properly. It’s a bit stupid not to scale to the maxHeight, but you could always use Flex 4.5 Image class instead or just create your own to handle max height/width.