问题
when i run the image, it only appear in center with 2 blank white space in between.
<s:Image x="0" y="0" height="100%" width="100%" source="@Embed('assets/d.jpg')"/>
How can i make an image goes full screen (covering up the whole screen) with double tap/touch on mobile app?
And if possible how to turn it back to non-full screen (back to normal)?
thanks.
image size: W=1920, H=1200
回答1:
To remove the white bars you're going to have set the scaleMode of the Image tag. The default is Letterbox; which is what you appear to be using.
If you set it to stretch then it will fill the space, without the white border. However, it may distort the image by not maintaining the aspect ratio.
回答2:
Problem: Mobile devices come with different screen sizes. And we need an image to look good across different screen sizes (Android + iPhone + iPad + iPod, etc.).
One Solution: I recently had to deal with this issue and found that this worked well for me.
<s:BitmapImage id="image"
source="@Embed('assets/images/background_startup.png')"
width="100%" height="100%" smooth="true" smoothingQuality="high"
scaleMode="zoom" horizontalAlign="center"/>
Now as you can see this eliminates the white border's while maintaining aspect ratio. If you are developing a splash image (like the ones you see at the beginning of most application startups) this is a really simple way of taking care of it. Mind that you will have to develop a multi-screen compatible image, or assign a properly scaled image depending on the screen size. If you just want to develop ONE image, a good size that currently employ is 700px wide and 1200px tall. Why so much taller? Because most high-res devices use this screen size (lets consider this the max resolution). At the same time, developing an image that is significantly taller than it is wide helps us control which parts of the image are cropped if a smaller screen size requires it. Mind you this model only works if your app is running in portrait only.
As you can see above we have a "safe" zone and an "unsafe" are we can expect to be cropped. From what I've found this area is about 100 to 110px tall and should not include important text or information but still includes the background and borders so everything still looks good.
Moto Droid Pro
Moto Droid X
iPhone 3GS
Hope this helps!
来源：https://stackoverflow.com/questions/7166988/flex-make-image-full-screen