4 Replies Latest reply on Jan 29, 2010 8:03 AM by toft

    Image dynamicly filling app window

    toft Level 1

      I have made a skin for an application.

      I want an image to dynamicly fill the whole browserwindow.

      (I`m using a 500 x 400 px image when testing this)

       

      However, the code below doesnt work. The image turns out in original size.

       

      When adding height="{hostComponent.height} the image turns out like in the attached image file.

      I want the image to fill the screen even if it means cutting a part of the lower half.

       

      I have tried a few other variations but I havent found a solution.

       

      Anyone ??

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- containers\application\mySkins\MyAppBackgroundSkin.mxml -->
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          xmlns:s="library://ns.adobe.com/flex/spark">

      <fx:Metadata>
        [HostComponent("spark.components.Application")]
      </fx:Metadata>

      <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
      </s:states>
       
      <mx:Image
        source="@Embed('assets/images/Voss_2008_Kari_582.jpg')"
        width="{hostComponent.width}"/>

      </s:SparkSkin>

        • 1. Re: Image dynamicly filling app window
          David_F57 Level 5

          Hi,

           

          If you want to fill the 'screen' but maintain aspect ratio you need to either over size the image and center it or adjust the height by the aspect ratio to match the width of the screen. The following will just place the image in the top left hand corner stretch it to the width of the screen then adjust the height. The math can get a little more complex if you want to ensure that the height is completely covered. For example test the screen aspect ratio against the image aspect ratio to determine whether you are going to clip the bottom or clip the right hand side.

           

          You can experiment with maintainAspectRatio and scaleContent being true or false, but in the end you will need to do some programmatic resizing of the image container.

           

          <mx:Image id="bg" maintainAspectRatio="true" scaleContent="true" top="0" left="0" right="0" creationComplete="image1_creationCompleteHandler(event)"/>

           

           

          protected function image1_creationCompleteHandler(event:FlexEvent):void

          {

          var ar:Number;

          ar = bg.contentWidth/bg.contentHeight;

          bg.height = width/ar;

          }

          1 person found this helpful
          • 2. Re: Image dynamicly filling app window
            toft Level 1

            Thanks David.

             

            I did find a solution similar to yours that works. However, I think this should be covered by some native FB functionality.

            • 3. Re: Image dynamicly filling app window
              David_F57 Level 5

              Hi,

               

              autoBestFit...     In a perfect world that would be nice, unfortunately ...................

               

              the spark image component has a mode property that is more inline with your standard image sizing  it has clip/scale/tile, but it lacks some of the nicities of mx image (spark bitmapimage is a light weight component). I suppose in combination of minwidth/minheight you could get semi best fit. If you are feeling couragous you could extend the image component with a bestfit algorithm .

               

               

              David

              • 4. Re: Image dynamicly filling app window
                toft Level 1
                function(){return A.apply(null,[this].concat($A(arguments)))}

                David_F57 wrote:

                 

                I suppose in combination of minwidth/minheight you could get semi best fit. If you are feeling couragous you could extend the image component with a bestfit algorithm .

                 

                 

                David

                 

                 

                Thanks again for the input David.

                 

                Yes there seem to be room for an extended and improved image class here.

                I`ll put it on my todo list !