apache-flex - 调整组件大小以缩放

Question

我有 SampleComponent :

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         resizeMode="scale">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Image source="@Embed('assets/images/soLogo.jpg')" width="100%" height="100%" scaleMode="stretch" />

</s:Group>

它只有一个图像，可以拉伸(stretch)以填充整个组件区域，组件 resizeMode设置为“比例”。

我使用以下代码将此组件放入应用程序中:

<local:SampleComponent id="sample" 
                       width="100%" 
                       height="{sample.width * 0.2961165048543689}" />

宽度设置为应用程序宽度的 100%。在我尝试正确缩放组件时，我将高度设置为宽度的百分比。

当应用程序窗口调整大小时，它看起来像这样:



这里的最后一张图片是我的问题，它超出了应用程序的范围。

如何在不超出父容器边界的情况下调整组件大小？

有没有更正确的缩放组件的方法？

Answer 1

This post回答 this library

我想你也可以这样做:

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width / ratio)}"