Image percentWidth 100 height stays original image height (margin)

Question

What happens with the code below is that image width is scaled to 100% as expected and the height also scales as expected keeping the aspect ratio correct. Issue is that there is a margin at the bottom and that seems to be the height of the original contentHeight of the image. How can I get rid of that?

I am using percentages so that it scales when device orientation changes.

backdrop.source = "http://cf2.imgobject.com/t/p/" + "w342" + data.backdrop;
backdrop.scaleMode = "letterbox";
backdrop.horizontalAlign = "left";
backdrop.verticalAlign = "top";
backdrop.smooth = true;
backdrop.percentWidth = 100;

If you want to preserve the original aspect ratio, you can't get rid of the black area unless you're willing to "chop" off portions of the left/right edges of the image. The assumption is that the original aspect ratio of your image is not square, by chopping off the edges you make it square. — Sunil D.
I don't really understand why, I mean this doesn't happen in html/css. I mean image should just scale proportionally, I don't see why it would leave a margin at the bottom..? — DominicM
You didn't show in your code which image control you're using, but by default the Spark one (and probably the mx one) try to preserve the aspect ratio. You can configure that using the scaleMode property of the Image. — Sunil D.
Yes it's s:Image and I am using scaleMode="letterbox" so it scales proportionally as expected but there is a gap below it's equal to original height of the image. eg: 342px width image leaves about 20 px margin at the bottom while 500 px image leaves about 220px margin. — DominicM

Sunil D. Sunil D. · Accepted Answer · 2013-03-08T17:34:07

The answer to your question is don't use the letterbox setting. That is going to preserve the aspect ratio and make the black area, hence the name letterbox :)

Try setting scaleMode to zoom instead. As the documentation states, zoom will result in one axis being clipped. This should scale the image, preserve the aspect ratio, but clip some edges of the image to avoid having the black area.

Other solutions to this problem are:

modify the original image outside of Flash
use a mask to achieve similar results that the zoom setting will provide. In this approach you make the image bigger, but then apply a square mask to the image. The mask reveals only the square portion ... clipping what is outside the mask.
(undesirable in most cases) use the scaleMode setting of strectch (and specify both width/height) so that the area is filled, this will not preserve the aspect ratio

PS: There is no way to avoid the black area if the image's aspect ratio is not square. Even with HTML/CSS. This is just math/geometry. The same thing happens in HTML -- the image is either stretched, clipped, or will not fill both dimensions.

[Edit]

PPS: One other idea, if you know the original aspect ratio of the image, is to calculate a new width that will be closest to the desired width, but naturally preserves the width to height aspect ratio.

For example, the width:height ratio is 4:3. Your desired width is 500 pixels. Using cross products you get this:

4      500
-   =   -
3       x

Using cross products you get the equation:

4x = 3*500

Now solve for x:

x = 3*500/4 = 375

Therefore, if the original aspect ratio is 4:3, you can set a width of 500 and a height of 375 to scale the image and not have any black areas. You can even write code that dynamically calculates the aspect ratio, and applies this logic to scale something nicely. The point is that you have to the respect aspect ratio when scaling the image to avoid the "black" areas.

Image percentWidth 100 height stays original image height (margin)

1 Answers