Flex Spark Image调整大小以适合容器

Question

我使用以下代码将图片加载到屏幕上：

<s:Scroller xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            width="100%" 
            height="100%">

    <s:VGroup width="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalAlign="top">
        <s:Label width="100%" text="Being Active" fontSize="14" fontFamily="Black"/>
        <s:Image fillMode="scale" smooth="true" scaleMode="letterbox" verticalCenter="0" horizontalCenter="0" width="100%" source="@Embed('assets/img/q3/q3c1all.png')"/>
       ....
       ....
    </s:VGroup>

</s:Scroller>

在附图中，它有三个图像 1.构建器视图 2.最终设计（设计师期望的） 3.渲染输出（用户将看到的内容）

由于scaleMode信箱，图像上方和下方有很多空格。这打破了这一层。有人可以建议我如何使外观看起来像设计预览（标题为要求）

如何按比例缩放图像而不会扭曲（就像在CSS中完成的那样）。

Answer 1

对于那些努力解决这个问题的人来说 - 解决方案是使用它可以让你完全控制位图。需要注意的一点是 - 如果您计划将交互/事件与图像一起使用，请将其包装在容器中并向其添加click事件。

我不知道这是否是最佳解决方案，但它对我有用：）