Actionscript 3 从100%宽度的Spark列表图像项中删除空白

我是Flex新手，为了学习，我正在浏览一份个人任务清单。当前正在使用用于显示图像阵列的列表。我的最后5张图片比列表尺寸大。当我为图像设置width=“100%”时，它会在图像的上方和下方添加空白/填充。有一匹母马试图摆脱它。代码如下：

<s:List id="fgList" left="{width * 0.2}" height="100%" width="75%"
        useVirtualLayout="false" pageScrollingEnabled="false"
        verticalScrollPolicy="on" horizontalScrollPolicy="off"
        contentBackgroundAlpha="0" itemRenderer="{null}">
    <s:layout>
        <s:VerticalLayout requestedRowCount="-1" variableRowHeight="true" gap="10"/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList id="fgImages">
            <s:Image source="@Embed('assets/fg-v1-img001.png')" width="100%"/>
            <s:Image source="@Embed('assets/fg-v1-img002.png')" width="100%"/>
            <s:Image source="@Embed('assets/003.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/004.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/005.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/006.jpg')" width="100%"/>
            <s:Image source="@Embed('assets/007.jpg')" width="100%"/>
        </s:ArrayList>
    </s:dataProvider>
</s:List>

通过creationComplete调用函数：

<s:Image source="@Embed('assets/fg-v1-img001.png')" smooth="true" creationComplete="imageLoaded(event)"/>

---

这里有两个属性需要查看。和

默认情况下，

fillMode

设置为

scale

，将图像缩放到指定大小。这就是你想要的。其他选项有

clip

，它将以实际尺寸显示图像，并仅遮罩指定尺寸以外的区域；以及

repeat

，如果指定尺寸较大，它将重复图像

因此，您需要更改的是

scaleMode

。默认情况下，它被设置为

信箱

，该信箱用于显示图像。它缩放图像，直到达到区域的一个极限，同时保持原始纵横比。如果图像和区域的纵横比不同，它会在达到第一个限制时立即停止，在边缘留下空白。这与在电视上观看大多数电影时得到的效果相同，因为电影的纵横比通常与电视使用的16:9不同。这就是你目前正在经历的

其他两个选项，

拉伸

和

缩放

，将更改纵横比以匹配指定区域<代码>拉伸顾名思义，将拉伸两个轴以填充该区域。根据定义，这将扭曲图像的比例。您需要的选项是

缩放

，它将缩放图像，直到填充整个区域。不过，这会将图像的一部分推出可见区域。但是，一般来说，这是最好的选择，除了使用正确的纵横比之外，实在没有办法避免它。此外，这将使图像垂直和水平居中。我不确定你是否能改变这一点；老实说，我从来没有试过

<s:Image source="@Embed('assets/007.jpg')" width="100%" scaleMode="zoom"/>

---

上面的代码应该可以做到这一点。您可能还需要指定高度，但我不确定。我知道每次使用

zoom

时，我都会测试它，但似乎永远都不记得答案是什么。

谢谢。缩放裁剪图像，我不能允许在前景内容上进行缩放。必须显示图像的整个宽度，这最初会导致顶部和底部出现边框。通过缩放，图像会得到一个水平对齐=中心，导致两侧的内容丢失。不过，我正在对我的背景图像使用缩放。尽管如此，如果其他解决方案比我目前实现的[imageLoaded函数]更好，欢迎使用。不幸的是，您的选择要么拉伸图像，使其纵横比错误，图像扭曲（

stretch

），要么隐藏顶部和底部或左右边缘的一部分。（

缩放

）。没有其他方法可以做到这一点。你不能不失真地显示整个图像。这就是改变纵横比时发生的情况

<s:Image source="@Embed('assets/007.jpg')" width="100%" scaleMode="zoom"/>