1 Reply Latest reply on Sep 21, 2006 1:50 PM by peterent

    Image Scaling Bug?

      I've been working with flex for a few weeks now, and I've come across this odd behavior in the Image class. The livedocs state that the default value for the scaleContent property of an Image object is 'true'. This is the case, and when setting the width or height of my image it scales correctly. The problem is that the container that holds the object only scales with the explicitly set value and leaves the other as its original size.

      The following code is a small testcase to show the behavior in action.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      .test {
      cornerRadius: 0;
      headerHeight: 0;
      borderThickness: 1;
      dropShadowEnabled: false;
      borderStyle: solid;
      backgroundColor: #333333;
      borderColor: #ff0000;
      titleStyleName: "myTitleStyle";
      <mx:Box styleName="test">
      <mx:Image source="glassdoor.jpg" height="32"/>

      You'll have to replace the image name with one that you provide, and set the height to something smaller that the image's height to see the effect. The box's red border shows that it realizes the image is 32 pixels in height, but doesn't seem to know what to do with the implicitly scaled width. Any ideas? Am I doing something wrong, or is this a bug? Since the box normally conforms to the size of the object inside it, I would have expected it to shrink on both parameters to continue hugging the outside of my newly-scaled image.
        • 1. Re: Image Scaling Bug?
          peterent Level 2
          The problem is that when the Box asks the Image for its size it can only report the explicity set height. When the Image tag loads its source it scales it to make the size you set (32 high) but doesn't change its width - it is the Image and not the Box that is causing what you see. The Image won't shrink to fit the image loaded. Try adding horizontalAlign="center" to the Image and see if the loaded source floats in the middle.

          Using horizontalAlign and verticalAlign on the Image tag aligns the actual image within the Image tag space. For example, if you have <mx:Image width="100" height="100" horizontalAlign="center" verticalAlign="middle" /> and you load in a 300x600 image, the image will be scaled to 50x100 and be centered within the 100x100 area of the Image tag.

          In general, if you cannot give an explicit size, give a minWidth or minHeight, so the measurement phase of the Flex component layout cycle has something to work with.