title: resize div but keep dimensions
body: <p>I want a <code>&lt;div&gt;</code> that reacts and fits the screen window size. The <code>&lt;div&gt;</code> is supposed to have the dimensions 2:3 So that the height is 3:3 and the width is 2:3. It is easy enough to make it in css by writing <code>width: 200px;</code> and <code>height:300px;</code>.</p>
  
  <p>The thing is that I want the height of the <code>&lt;div&gt;</code> to resize depending on the screensize.  And also I want the text inside of it to resize. I know it is possible by javascript or jQuery, but I really don't know how. Something like taking the height and split it in three, and then times two, and then make <code>.css({'width',newWidth});</code></p>
  
  <p>And it should be about the same thing with the text inside of it.</p>
  
  <p>I found the correct way to do it. I had to change a little bit, but it works now.</p>
  
  <pre><code>$(window).resize(function() {
  var ratio = 0.6;
  $('#hovsa').width($(window).height() * ratio).height($(window).height());
  // instead of directly using "$(window).width() * ratio", you can call a method to
  // calculate width and height each time window is resized.
  })
  </code></pre>
  
  <p>I have changed the width to be <strong>height * ratio</strong> and it worked very well. The only thing I need to do now is to make the fontsize going the same way as well.</p>