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

下面的代碼會發生什麼情況是圖像寬度按預期縮放到100％，並且高度也按預期縮放，以保持縱橫比正確。問題是底部有一個邊緣，這似乎是圖像的原始contentHeight的高度。我怎樣才能擺脫這一點？圖像percentWidth 100高度保留原始圖像高度（margin）

我正在使用百分比，以便在設備方向更改時進行縮放。

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;

來源

2013-03-08 DominicM

如果您想保留原始高寬比，除非您願意「切掉」圖像左右邊緣的部分區域，否則無法清除黑色區域。假設您的圖像的原始縱橫比不是正方形，通過削減您使其成方形的邊緣。 – 2013-03-08 16:28:38

我不明白爲什麼，我的意思是這不會發生在HTML/CSS。我的意思是圖像應該按比例縮放，我不明白爲什麼它會在底部留下邊距..？ – DominicM 2013-03-08 17:03:12

您沒有在代碼中顯示您使用的圖像控件，但默認情況下，Spark one（可能是mx）會嘗試保留寬高比。您可以使用圖像的[scaleMode]（http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/spark/components/Image.html#scaleMode）屬性進行配置。 – 2013-03-08 17:24:01

您的問題的答案是不要使用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的高度來縮放圖像，並且不會有任何黑色區域。你甚至可以編寫動態計算寬高比的代碼，並將這個邏輯用於很好地擴展。重點是在縮放圖像時必須尊重寬高比以避免「黑色」區域。

來源

2013-03-08 17:34:07

實際上沒有黑條，只是邊距（我看到背景圖片）。「縮放」確實是我所期待的。屬性名稱「縮放」讓我失望，因爲它實際上並不是縮放，而是縮放圖像。謝謝。 – DominicM 2013-03-08 17:46:34

是的，我考慮使用16：9寬高比手動計算尺寸。問題是，當設備旋轉時，它不會重新計算。即使您手動調用計算函數，尺寸全部爲0（設備不會立即更新），因此使用百分比值比試圖解決尺寸更新延遲問題更簡單。 – DominicM 2013-03-08 17:48:39

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

回答

相關問題