图像percentWidth 100高度保留原始图像高度（margin）

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设置。这将保持宽高比并使黑色区域，因此名称信箱:)

尝试设置scaleMode到zoom而不是。如documentation所述，缩放将导致一个轴被裁剪。这应该缩放图像，保持宽高比，但剪切图像的某些边缘以避免出现黑色区域​​。

这个问题的其他解决方案是：

• 修改原始图像的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的高度来缩放图像，并且不会有任何黑色区域。你甚至可以编写动态计算宽高比的代码，并将这个逻辑用于很好地扩展。重点是在缩放图像时必须尊重宽高比以避免“黑色”区域。