Question

如何缩放图像，无论它保留100％的宽度和高度比例？在html和css中完成宽度：100％;身高：自动并且在闪光图像中，当按比例缩放时，在顶部和底部留下边距

这是我的代码：

<s:Image id="bannerImage" width="100%" useHandCursor="true" fillMode="scale" verticalAlign="middle" scaleMode="letterbox" smooth="true" smoothingQuality="high" />

这就是转变：

enter image description here

红色矩形 - 缩放时留下的空间？

Answer 1

默认情况下，Image会缩放图形以保持其宽高比。

您可以通过scaleMode属性配置此行为默认值为BitmapScaleMode.LETTERBOX
如果您想要拉伸图形，请改用BitmapScaleMode.STRETCH。

<s:Image source="@Embed('/myImage.png')" 
         scaleMode="stretch" width="100%" height="100%"/>

Answer 2

完整代码mxml：

<?xml version="1.0" encoding="utf-8"?>

buttonMode="true"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"

initialize="init()">

<fx:Script>
<![CDATA[

    import core.Application;
    import core.media.Manager;
    import flash.filesystem.File;
    import spark.components.RichEditableText;
    import spark.components.RichText;
    import flashx.textLayout.conversion.TextConverter;

    private var bannerID:String;
    private var bannerData:Object;

    // Init banner to show
    // -------------------
    public function init():void {

        // If no any banners, return
        // -------------------------
        if (Application.storage.banners == null) return;

        // Count banners
        // -------------
        var count:Number = 0;
        var banners:Array = new Array();
        for (var itemIndex:String in Application.storage.banners) banners.push(itemIndex);

        // Select any random
        // -----------------
        var bannerIndex:Number = Math.round(Math.random() * (banners.length - 1));
        this.bannerID = banners[bannerIndex];
        this.bannerData = Application.storage.banners[bannerID];

        // If banner non exists, return
        // ----------------------------
        var bannerFile:File = File.applicationStorageDirectory.resolvePath('data/banners/' + this.bannerID + '.jpg');
        if (! bannerFile.exists) return;

        // Else, banner is exists
        // ----------------------
        Manager.lazyLoad(this.bannerImage, bannerFile);     

    }

    // Open banner inside popup
    // ------------------------
    private function openBanner():void {

        // If no text data, return
        // -----------------------
        if (bannerData.text == null) return;

        // Create text object
        // ------------------
        var bannerText:RichEditableText = new RichEditableText();
        bannerText.percentWidth = 100;
        bannerText.lineBreak = 'toFit';
        bannerText.textFlow = TextConverter.importToFlow(bannerData.text, TextConverter.TEXT_FIELD_HTML_FORMAT);

        // Show popup
        // ----------
        ui.Popup.show(bannerText);

    }

]]>
</fx:Script>

<s:Image id="bannerImage" width="100%" height="100%" click="openBanner()" useHandCursor="true" fillMode="scale" verticalAlign="middle" scaleMode="letterbox"  smooth="true" smoothingQuality="high" />

Answer 3

使用BitmapImage代替图像，使用scaleMode =“letterbox”。

flash - spark图像宽度= 100％，高度=自动

3 个答案: