Constrain proportions

Hi!

I have placed a div that are centered on a page with a given margin, if the window resize i want the div to change in constrain proportions. Is this possible? And how?

The size of div should be 1280x800px. (Ratio 1,6)

The document.getElementById want work...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST DYNAMIC SWF/DIV</title>
<script type="text/javascript">
<!--
       var WindowWidth;
       var WindowHeight;
       var swfHeight;
       var swfWidth;
       var swfHalfHeight;
       var swfRatio;
       var swfMargin;
      
      
       // Check window size start
       // ------------------------------------------------------------------------------
       // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
       if (typeof window.innerWidth != 'undefined')
       {
              WindowWidth = window.innerWidth,
              WindowHeight = window.innerHeight
       }
        
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
       else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
       {
               WindowWidth = document.documentElement.clientWidth,
               WindowHeight = document.documentElement.clientHeight
       }
        
       // older versions of IE
       else
       {
               WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
               WindowHeight = document.getElementsByTagName('body')[0].clientHeight
       }
       // ------------------------------------------------------------------------------
       // Check window size end

 
      // Check flash ratio size start
      // ------------------------------------------------------------------------------  
      // give the flash correct size depend on window width..
      if (WindowWidth>=1681)
        {
            //1920x1200 (1132x800)
            swfWidth = "1280";
            swfHeight = swfWidth / 1.6;
            swfWidth = Math.round(swfWidth);
            swfHeight = Math.round(swfHeight);
            //swfHeight="800";
            //swfWidth="1280";
            swfHalfHeight = -swfHalfHeight;
            swfHalfHeight = Math.round(swfHalfHeight=swfHeight/2  );
            swfRatio = swfWidth/swfHeight;
        }
      else
        {
            swfMargin = "200";
            //Tilgjengelig plass
            swfWidth = WindowWidth - swfMargin;
            swfHeight = swfWidth / 1.6;
            swfWidth = Math.round(swfWidth);
            swfHeight = Math.round(swfHeight);
            //swfHeight="800";
            //swfWidth="1280";
            swfHalfHeight = -swfHalfHeight;
            swfHalfHeight = Math.round(swfHalfHeight=swfHeight/2  );
            swfRatio = swfWidth/swfHeight;
        }
      // ------------------------------------------------------------------------------    
      // Check flash size end
      
      // Update the css style with given value.
      document.getElementById('distance').style.marginBottom = swfHalfHeight;
      document.getElementById('container').style.height = swfHeight;
      document.sgetElementById('container').style.width = swfWidth;
 //-->
</SCRIPT>

<style type="text/css">
      * {
            margin:0;
            padding:0;
            }

      html, body {
            height:100%;
            }

      body {
            background-color:#cccccc;
            color:#630;
            font:100.01%/1.4 sans-serif;
            text-align:center; /* horizontal centering for IE Win quirks */
            }

      #distance {
            width:1px;
            height:50%;
            background-color:#cccccc;
            margin-bottom:-400px; /* half of container's height */
            float:left;
            }

      #container {
            margin:0 auto;
            position:relative; /* puts container in front of distance */
            text-align:left;
            height:800px;
            width:1280px;
            clear:left;
            background-color:#cccccc;
            border:1px solid #000000;
            border-top-color:#000000;
            border-left-color:#000000;
            }

      #container div {
            font-size:80%;
            float:right;
            width:17em;
            margin-left:2em;
            }
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>

      <div id="distance"></div>
      <div id="container">
            <center>
            <script type="text/javascript">
            document.write('Vindu bredde er: '+WindowWidth+'<br>');
            document.write('Vindu høyde er: '+WindowHeight+'<br>');
            document.write('Flash bredde er: '+swfWidth+'<br>');                  
            document.write('Flash høyde er: '+swfHeight+'<br>');
            document.write('Flash margin er: '+swfHalfHeight+'<br>');
            document.write('Ratio er: '+swfRatio+'<br>');
            document.write('Margin er: '+swfMargin+'<br>');
            </script>
            </center>
      </div>

</body>
</html>
LVL 1
myhrvoldAsked:
Who is Participating?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.