Flex Spark 图像调整大小以适应容器

Posted

技术标签:

【中文标题】Flex Spark 图像调整大小以适应容器【英文标题】:Flex Spark Image Resize to fit container 【发布时间】:2015-12-21 09:10:51 【问题描述】:

我正在使用以下代码将图像加载到屏幕:

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

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

</s:Scroller>

在附图中,它有三个图像 1.构建器视图 2. 最终设计(设计师所期望的) 3. 渲染输出(用户将看到的)

由于 scaleMode 信箱,图像上方和下方有很多空间是空白的。这打破了这一层。有人可以建议我如何使输出看起来像设计预览(标题为要求)

如何在不失真的情况下按比例缩放图像(就像在 CSS 中所做的那样)。

【问题讨论】:

您包含的代码看起来应该可以正常工作。您能否也发布容器的标记? 【参考方案1】:

对于那些在这个问题上苦苦挣扎的人 - 解决方案是使用它可以让您完全控制位图。需要注意的一点是 - 如果您打算对图像使用交互/事件,请将其包装在容器中并向其添加点击事件。

我不知道这是否是最好的解决方案,但它对我有用:)

【讨论】:

以上是关于Flex Spark 图像调整大小以适应容器的主要内容,如果未能解决你的问题,请参考以下文章

如何在不破坏图像纵横比的情况下调整 QImage 或 QML 图像的大小以适应父容器

Flex 4:是不是可以让 BorderContainer 自动调整大小以适应其中的内容?

自动调整区域大小以适应屏幕

图像没有相对于父 div 正确调整自身大小

调整 SVG 大小以适应容器大小

如何自动调整标签大小以适应固定宽度的容器?