title: Maintaining the scale of an element on different window sizes
body: <p>I am trying to maintain an element in perfect scale on responsive design.
  So the width should be 100% and the height should be 56% of the width.</p>
  
  <p>However, if the dimensions of the window change, and the height of the window is reduced, the width should be reduced proportionally, to keep it in scale.</p>
  
  <p>Likewise if the width of the window is made more narrow, then we would want the width to adjust as well, proportionally.</p>
  
  <p>The width of the element is based on the width of the window.</p>
  
  <pre><code>&lt;div id="intro_cont"&gt;
  
  &lt;div id="video_cont"&gt;
      &lt;div id="text_cont"&gt;
          &lt;p id="intro_text" class="intro_text"&gt;Looking For Reliable, Accurate Measurement Equipment?&lt;/p&gt;
          &lt;p id="intro_text2" class="intro_text"&gt;We Can Help You&lt;/p&gt;
          &lt;div id="play_cont"&gt;
              &lt;div id="play_button"&gt;&lt;/div&gt;
          &lt;/div&gt;          
      &lt;/div&gt;
      &lt;div id="intro_video"&gt;
          &lt;iframe id="video_iframe" src="//www.youtube.com/embed/#t=0s" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>$(window).resize(function(){
      dimension = 0.56;
      cont_width = $('#video_cont').width();
      cont_height = $('#video_cont').height();
      video_width = cont_width;
      video_height = video_width * dimension;
      if(video_height &lt; video_width * dimension) {
          video_height = video_width * dimension;
      }
  
      $('#video_iframe').css({'width':video_width,'height':video_height});
  });
  </code></pre>
  
  <p>This code works for when you adjust the width, but when the height changes, the element doesnt scale.</p>