Edge Animation won't scale to width and height parent div

Okay, here is how I fixed the problem

Set the animation up as 100% w and 100%h

You will have to take it out of responsive mode for that, also uncheck the center stage option.

Next, I put a container around my stage in the html. I called it class="stagewrap"

Then I added javascript so that stagewrap would maintain a certain aspect ratio but scale to 100%width.

This is what my html looked like

<div class="stagewrap">

        <div id="Stage" class="edge-###">

            </div>

  <script language="javascript" type="text/javascript">

            var thisRatio =x;

            $(document).ready(setRatio);

            $(window).resize(setRatio);

            var sw = $('.stagewrap');

  var originalWinWidth = y;

  var originalFontSize = z;

            function setRatio() {

                    sw.height(sw.width() * thisRatio);

            }

  </script>

        </div>

My CSS looked like this:

.stagewrap {

  margin-top:20px;

  width:100%;

  position: relative;

  overflow:hidden;

  margin-bottom: 30px;

  float:left;

  font-size: 2.5vw;

}

Some of these styles will need changing according to your needs or negating according to your needs.

x is going to be your ration, which is your width devided by your height, you can just divide the pixel numbers, the units cancel out and that ratio will work for any other unit.

y is the width at which your animation is at 100% resolution without being scaled up or down. This is a VERY important number to maintain your percentages throughout correctly.

And z is probably 1, unless you want your text to be larger or smaller, you can play with that yourself.

In my code I also wanted to set it so that after a certain window width the animation went to a static size so i did this"

<div class="stagewrap">

        <div id="Stage" class="edge-###">

            </div>

  <script language="javascript" type="text/javascript">

            var thisRatio = x;

            $(document).ready(setRatio);

            $(window).resize(setRatio);

            var sw = $('.stagewrap');

  var originalWinWidth = y;

  var originalFontSize = z;

            function setRatio() {

                if ($(window).width() <= s) {

                    sw.height(sw.width() * thisRatio);

                }

                else {

                    sw.height(sh);

                }

            }

  </script>

        </div>

s= the window width at which you want the size to go static MINUS 1px

sh= the static height at which you want the image to stay at, this number will automatically set the width through the ratio.

Just as assurance, in you css for the window size you want the static image to hold at set the size of the .stagewrap in px

I hope this helps!!