2 Replies Latest reply on Feb 14, 2008 8:32 PM by mac_martine

    maxWidth and maxHeight fixed bounding

    vEr5e Level 1
      I am trying to use the maxWidth and maxHeight of the Image component in Flex Builder 3. I also had the width and height properties set to 100% so that they will resize according to the size of the parent VBox.

      However, I realise that the maxWidth and maxHeight is doing a fixed bound around the image component. Say I have my maxWidth as 500. When I resize my browser, the parent VBox resizes too. The Image component inside the maxWidth also resizes but the "bounding" area surrounding the image is fixed to 500px. Say the image got resized to 300px width according to the resized browser size, the Image component is still taking up 500px. Anything around the image has a big gap away from the resized image because the image is fixed to an area of 500px.

      Is there anyway to make the Image component to have a maxWidth and maxHeight but not having a fixed bounding area around the component of that max measurements?

      Thanks.
        • 2. Re: maxWidth and maxHeight fixed bounding
          mac_martine Level 1
          The reason this is happening is because when you tell the image to take up 100%, it will take up all the remaining space that the other components in the VBox aren't taking up.

          In this example (if you point the Image source to point to an image in your project) you'll see what you're talking about, where the image bounding box takes up all the remaining space that the VBox doesn't take up.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

          <mx:VBox x="87" y="71" height="100%" width="100%" borderColor="#9E2828" borderStyle="solid" borderThickness="2">
          <mx:Image source="DSC06968.JPG" height="100%" maxWidth="500"/>
          <mx:List></mx:List>
          </mx:VBox>

          </mx:Application>


          But if you make a container around the List and also set it's height to 100% you'll get the result I think you're expecting, because now the Canvas will take up all the space that the image isn't taking up.

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

          <mx:VBox x="87" y="71" height="100%" width="100%" borderColor="#9E2828" borderStyle="solid" borderThickness="2">

          <mx:Image source="DSC06968.JPG" height="100%" maxWidth="500"/>
          <mx:Canvas height="100%">
          <mx:List></mx:List>
          </mx:Canvas>

          </mx:VBox>

          </mx:Application>


          Let me know if that does or doesn't solve your problem.

          Mac