0

下面的代码发生的情况是，图像宽度按预期缩放到 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;
4

1 回答 1

1

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

尝试设置scaleMode为zoom。正如文档所述，缩放将导致一个轴被剪裁。这应该缩放图像，保持纵横比，但剪裁图像的一些边缘以避免出现黑色区域​​。

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

  • 在 Flash 之外修改原始图像
  • 使用遮罩来获得zoom设置将提供的类似结果。在这种方法中，您可以使图像更大，但随后将方形蒙版应用于图像。蒙版只显示正方形部分……剪掉蒙版之外的部分。
  • （在大多数情况下不受欢迎）使用（并指定宽度/高度）的scaleMode设置，strectch以便填充区域，这不会保留纵横比

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

[编辑]

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

例如，宽高比为 4:3。您想要的宽度是 500 像素。使用交叉产品你会得到这个：

4      500
-   =   -
3       x

使用叉积可以得到等式：

4x = 3*500

现在解决x：

x = 3*500/4 = 375

因此，如果原始宽高比为 4:3，则可以设置宽 500 高 375 来缩放图像并且没有任何黑色区域。您甚至可以编写动态计算纵横比的代码，并应用此逻辑来很好地缩放某些东西。关键是在缩放图像时必须注意纵横比以避免“黑色”区域。

于 2013-03-08T17:34:07.073 回答