7 Replies Latest reply on Sep 27, 2006 12:07 PM by peterent

    Image width bug?

    pyroblue Level 1
      http://pyroblue.dyndns.org:8080/flexapps/BhgPhotoContest/bin/BhgPhotoContest.html

      if you view that page, you can see there is a lot of whitespace underneath the image...im just setting the image width (similar to what you do with HTML)...but for some reason, Flex puts a bunch of whitespace (the original height's worth) at the bottom of the image....

      my mxml file looks like this:

      <mx:HTTPService id="contestListing" url="photocontest.xml" result="pcDataHandler(event)" fault="faultHandler(event)"/>

      <mx:Repeater dataProvider="{photoContests}" id="pcRepeater">

      <mx:VBox>
      <mx:Label text="{photoContests.getItemAt(pcRepeater.currentIndex).pcName}" fontSize="14" fontWeight="bold"/>

      <mx:HBox>
      <mx:Image source="{photoContests.getItemAt(pcRepeater.currentIndex).prevPhoto}" maxWidth="75" maintainAspectRatio="true"/>
      <mx:Text text="{photoContests.getItemAt(pcRepeater.currentIndex).desc}" width="400" fontSize="10"/>
      </mx:HBox>
      </mx:VBox>
      </mx:Repeater>
      </mx:VBox>


      any ideas?
        • 1. Re: Image width bug?
          peterent Level 2
          Use the horizontalAlign and verticalAlign properties of Image to position the image within the bounding box of the control.
          • 2. Re: Image width bug?
            pyroblue Level 1
            that doesnt quite fix it....look at: http://pyroblue.dyndns.org:8080/flexapps/BhgPhotoContest/bin/BhgPhotoContest.html now....i added the align to the bottom....as you can see....its making the entire area too big (its the original height of the image)...its like flex is allocating "X amount of space" for the original height of the image....it's not resizing the bounding box around the image when i set only the width.......
            • 3. Re: Image width bug?
              peterent Level 2
              Try scaleContent="true" on the Image tag.
              • 4. Re: Image width bug?
                pyroblue Level 1
                no dice....

                the only modest success ive had is with using the maxHeight and maxWidth properties....but still....if possible, id rather let flex figure out the 'whole height thing'.....
                • 5. Re: Image width bug?
                  peterent Level 2
                  Either I don't understand or Flex's imaging capability is too simplistic (or both). Let's say you have an image that's 640x480. You have 2 choices either let the image be its original size so it appears as 640x480 in the Flex application or you have it scaled to a bounding box using width, height, and scaleContent="true".

                  <mx:Image width="100" height="100" source="myimage.jpg" scaleContent="true" />

                  In this case the 640 dimension is scaled to 100 and 480 is scaled to 75. The default alignment is top, left.

                  I think the problem is that you are only specifying the width. If you want the image to take up space on a relative basis, then either use percentage sizing or relative positioning (left, right, top, bottom). Flex doesn't know how tall you want the space for the image to be. Since you are placing the image in an HBox, set width="75" and height="100%" and scaleContent="true" and see if that helps.
                  • 6. Re: Image width bug?
                    leotemp Level 1
                    I just dont understand this, ive aligned it to the verticle and horizontal center and told its 100% height and 100% width, and to scale the content and it doesnt fill the container. I have told the image it is left 0 top 0 bottom 0 right 0 and to scale the image and it doesnt fill the container. the only way i can get the image to fill its container if they are not the same dimensions is by making the image so large that its forced way beyond the borders of its container, thats not a solution. whats the deal with this?
                    Mr Ent, can you please post an example of say scaling a square image to fit a rectangle container that is larger then the image's pixel dimensions, this is driving me nuts.
                    • 7. Re: Image width bug?
                      peterent Level 2
                      Let's say your image is 300x300 pixels. You want to place it into an area that is 100x200 and an area that's 500x200, centered in both:

                      <mx:Image id="img1"
                      width="100" height="200" source="{imagefile}" scaleContent="true" maintainAspectRatio="true"
                      horizontalAlign="center" verticalAlign="middle" />

                      <mx:Image id="img2"
                      width="500" height="200" source="{imagefile}" scaleContent="true" maintainAspectRatio="true"
                      horizontalAlign="center" verticalAlign="middle" />

                      For img1, the smallest dimension is 100 (width) which it matches to the real image's maximum dimension which is 300. That means img1 will display an image 100x100 centered vertically with 50 pixels above and below.

                      For img2, the smallest dimension is 200 (height) which it matches to the real image's maxium dimension which is 300. That means img2 will display an image 200x200 centered horizontally with 150 pixels to the left and right.

                      The Image tag has 2 dimensions: img.width and img.height is the area it occupies on the display. img.contentWidth and img.contentHeight is area the pixels occupy. For img1, contentWidth and contentHeight are 100, for example.