6 Replies Latest reply on Dec 21, 2010 10:42 AM by ryancanulla

    Stretching an image to fill a screen.

    ryancanulla

      Can I make an image stretch to fill a screen? This example will grow only to fill the height or with to 100% It will not stretch the image. Any thoughts on how to change this?

       

      <mx:Image source="assets/background.png" x="0" y="0" width="100%" height="100%" />
      
      

        • 1. Re: Stretching an image to fill a screen.
          markerline Level 4

          In ActionScript, one can use values from 0 to 1 to represent 0% to 100% and any values above 1 will cause

          an increase in scale (or whatever parameter is being affected).  The same is true for CSS/HTML.  Have you tried this with flex?  Can you input a value of 200%?  On the same line can you input a ratio which reflects the dimensions of the desired result, if you know the target dimensions of your user's screen?

           

          There is also a value in HTML when you publish a Flash file (FLA>SWF) that is called "allowfullscreen" and you can set it to "true".  At least I believe that is what I saw the last time I checked a published HTML file for Flash . . .

          • 2. Re: Stretching an image to fill a screen.
            ryancanulla Level 1

            Well I know that you can use scaleX to grow an image but I want to just scale it to fit 100% of its parent container. It scales, but will stop when it reaches a wall on one side without distorting the screen...

            • 3. Re: Stretching an image to fill a screen.
              markerline Level 4

              I have seen Flash content on the web that has a "Full Screen" button that you can click to expand the FLV or whatever is on the SWF page to fit the full screen of the browser.  Perhaps you could find such a hook in Flex.  I simply haven't learned it yet but I know it's possible to do.  An example would be a YouTube video which you can click on the button to fit it to the Full Screen dimensions.  The button looks like an X with the arrows of the X extending outward to the 4 corners of the screen.  Whatever that code is to hook into that button's functionality is what you need.

              • 4. Re: Stretching an image to fill a screen.
                Shongrunden Adobe Employee

                I believe you can do this with the spark BitmapImage component: <s:BitmapImage fillMode="scale" .../>

                • 5. Re: Stretching an image to fill a screen.
                  BhaskerChari Level 4

                  Hi ryancanulla,

                   

                  You need to set the maintainAspectRatio="false" on Image control in order to stretch/scale to the full dimensions of its container.

                   

                  <mx:Image source="assets/background.png" x="0" y="0" width="100%" height="100%" maintainAspectRatio="false" />

                   

                  By default maintainAspectRatio="true" and it might not stretch fully..So make it to false.

                   

                  Thanks,

                  Bhasker

                  • 6. Re: Stretching an image to fill a screen.
                    ryancanulla Level 1

                    Thanks everyone!