3 Replies Latest reply on Feb 2, 2014 4:03 PM by Bobby Bol

    Centering AND Scaling an image (inside a div or symbol)

    Bobby Bol Level 1

      Hi all,

       

      Here's what I'm trying to get accomplished:

       

      I have a top banner for a website - the website is fully made in Edge.

       

      The banner is 540px high, and 100% width. (Stage width is also set to 100%)

       

      Now inside this banner, I want a large image to show.

       

      The center of this image should correspond to the center of the banner.

       

      The width of the image should be 100% of the banner. (Hence 100% of the browser window).

       

      The height of the image should remain proportional to the width of the banner, i.e. no distortions. (Was using auto before)

       

      The overflow should be hidden. (So basically the image is always 100% width of the browser window, and the height overflows both both up and down).

       

      Somehow in ver 3 of Edge Animate I can't get all these options to work at the same time - can't use 100% width and auto height for an image anymore.

       

      May be there's an altogether better way of doing this, so I'd be pleased to hear your response.

       

      Thanks in advance!

      Bob

        • 1. Re: Centering AND Scaling an image (inside a div or symbol)
          heathrowe Most Valuable Participant

          Do you have a preview link of the functional version that was created in v2, for us to view and get a general idea of your process.

           

          A banner image at 540height? Ah thats some banner size. I digress. But in terms of proportional 'fitting' there is no way that just 0, auto did this for you in the previous version.

          There must be another setting in place somewhere in your ver2 file that you got it to work.

           

          Please post a link.

          Darrell

          • 2. Re: Centering AND Scaling an image (inside a div or symbol)
            Bobby Bol Level 1

            Hi Darrel,

             

            Already thank you for replying to my posts, it is much appreciated.

            Did I say banner? I meant header. You'll find an example of a centered, scaling image that I put on:

            http://www.innua.ca/centerimage/

             

            You can also get a general idea of what I'm trying to achieve here, which also relates to my other post we're discussing. I'm building this parallax website in edge, and it has a number of elements which do different things. There's basically all the backgrounds for different sections, which have a fixed height and a 100% width. Then there will be the actual content, in a 960 safe zone, centered in the middle. I hope this explains why I can't use the new responsive scaling and centering options in ver3. These work over the whole stage, on every element on the stage, while I want different elements to do different things.

             

            But to stay on topic of this specific post:

             

            I believe what I did with this image was the following (I say believe because I can't check back since ver3 messed up this file):

             

            I made rectangle on the main stage and then converted it to a symbol. This symbol had a fixed height and 100% width. Inside this symbol I put the image as a div, and used one of the Edge presets to center the image. Then I changed the width to 100% and the height to auto, and that gave the result you're seeing in the example.

             

            What happened when I updated to ver3 is that it just deleted the image from the symbol it was in. It also changed the overflow to scroll for some weird reason, and all the setting in 100% width were also gone.

             

            In ver3 I can't use the same trick I did to center and scale the image as I used in ver2, in fact a number of things are different:

             

            - If you create a symbol, you can't set its width (or height) to 100% anymore. At least not while you're on the main stage that the symbol is on.

            - If you go into the symbol, and change the instance to resize rather than scale, then you can start working with percentage widths.

             

            My first question here is if this is intentional, or a bug. In some ways it makes sense to me, but it seems a little odd that this change was made to ver3 and messes with files created in ver2.

             

            - Then, if you insert an image in a div, and use the center preset, you cannot set the width of the image to 100% anymore. (This was possible in ver2.)

             

             

            What all this boils down to is that:

             

            1. I would love to understand more about the changes made in Edge ver3, specifically why so much has changed with the percentage value options for responsive scaling.

            2. I would still love to find out the best way to have a centered and scaling background image.

             

            Thanks!

            Bob

            • 3. Re: Centering AND Scaling an image (inside a div or symbol)
              Bobby Bol Level 1

              Hmmm,

               

              It appears that when I first select the 'center background image' preset, and then also select the 'scale background image' preset, I seem to get what I want.

               

              It doesn't always completely fill the background of my top header, especially when you make the browser width really small, but if I set a minimum width and be smart about the dimensions of my background image, this could work.

               

              Still, the last two questions of my previous post still stand..

               

              Thanks,

              Bob