Flex: масштабировать изображение так, чтобы его ширина соответствовала contentWidth?

Question

У меня есть динамический макет, где изображение загружается в HBox:

<mx:HBox ...>
    <mx:Image height="100%" .../>
</mx:HBox>

На изображении установлена ​​только высота изображения, так что оно может занимать все доступное вертикальное пространство, в то время как его ширина остается неопределенной, и я ожидаю, что ширина будет масштабироваться соответственно его высоте.

Получается, что высота изображения равна его contentHeight, то есть высота правильно масштабируется; тем не менее, ширина изображения остается такой же, как и ширина измерения (исходная ширина изображения), и не масштабируется соответствующим образом.

Например, если исходный размер изображения составляет 800x600, а высота HBox равна 300, высота изображения будет уменьшена до 300, однако ширина не уменьшится до 400, вместо этого она останется равной 800. *

Я пытался добавить прослушиватель событий, чтобы явно установить ширину изображения:

<mx:Image id="img" height="100%" updateComplete="img.width=img.contentWidth;" .../>

Работает только при первой загрузке изображения, после этого, если я использую Image.load () для динамической загрузки разных изображений, он перестает работать - ширина изображения установлена ​​на 0.

Любая помощь / советы будут высоко оценены.

Answer 1

Получил ответ на форуме Adobe. Мое решение было почти там, просто нужно использовать callLater (), как:

private function scaleImage():void {
    img.width = img.contentWidth;
}

updateComplete="callLater(scaleImage)"

Answer 2

Наблюдаемое поведение является документированной ошибкой, ошибкой, функцией.
В документации по классу изображений говорится, что высота изображения - это высота масштабированного изображения, а ширина изображения - это ширина немасштабированного изображения. И это его следует использовать для разметки.
Я понятия не имею, почему высота и ширина обрабатываются по-разному и почему масштабированное изображение должно занимать место в контейнере, но именно так оно и было закодировано

Линия

updateComplete="callLater(function():void{xxx.width=xxx.contentWidth;})"

(нет необходимости в отдельной функции скрипта) это исправляет. Но это действительно не должно быть необходимым.

Answer 3

попробуйте добавить: maintainAspectRatio="true"

---

Обновление 1: В ответ на ваш комментарий это является тем, что вы ищете, как вы можете видеть в примере здесь . Поддержание соотношения сторон подразумевает сохранение соотношения между шириной и высотой.

Answer 4

Попробуйте использовать <mx:Box /> или <mx:Canvas />, а не <mx:HBox />.

Как я понимаю, HBox имеет гибкую ширину. Он вычисляет ширину позже как сумму его детей. То же самое с высотой в VBox.