Question

以下代码会发生的情况是图像宽度按预期缩放到100％，高度也按预期缩放，保持纵横比正确。问题是底部有一个边距，似乎是图像原始contentHeight的高度。我怎么能摆脱它？

我正在使用百分比，以便在设备方向更改时进行缩放。

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;

Answer 1

您的问题的答案是不要使用letterbox设置。这将保留纵横比并制作黑色区域，因此名称为letterbox：）

尝试将scaleMode设置为zoom。作为documentation状态，缩放将导致一个轴被剪裁。这应该缩放图像，保留纵横比，但剪切图像的一些边缘以避免出现黑色区域。

此问题的其他解决方案是：

修改Flash之外的原始图像
使用遮罩来获得zoom设置所提供的类似结果。在这种方法中，您可以使图像更大，但随后对图像应用方形蒙版。面具只露出方形部分......剪裁面具外面的东西。
（在大多数情况下不合需要）使用scaleMode的{{1}}设置（并指定宽度/高度），以便填充区域，这不会保留宽高比

PS：如果图像的宽高比不是正方形，则无法避开黑色区域。即使使用HTML / CSS。这只是数学/几何。同样的事情发生在HTML中 - 图像被拉伸，剪裁或者不会填充两个维度。

<强> [编辑]

PPS：如果你知道图像的原始宽高比，另一个想法是计算一个最接近所需宽度的新宽度，但自然保留宽高比高宽比。

例如，宽高比为4：3。您想要的宽度是500像素。使用交叉产品可以获得：

strectch

使用交叉产品，您可以得到等式：

4      500
-   =   -
3       x

现在解决4x = 3*500：

因此，如果原始宽高比为4：3，则可以将宽度设置为500，将高度设置为375以缩放图像，而不是任何黑色区域。您甚至可以编写动态计算宽高比的代码，并应用此逻辑来很好地扩展。关键是在缩放图像时必须考虑宽高比，以避免出现“黑色”区域。

图像percentWidth 100高度保持原始图像高度（边距）

1 个答案: