title: Scale div so that it always keeps its aspect ratio and stays centered
body: <p>My english is not good, so i can't explain well enough, but here is <a href="http://jsfiddle.net/lucifer63/qugph22u/" rel="nofollow noreferrer">an example</a> [404]</p>
  
  <p>In the example if you resize window, the background image of <code>div.main</code> always will be sized in accordance with its ratio (1280*752).
  It would be perfect if I knew how to make div be resize the same way as its background.</p>
  
  <p>There is almost the same thing in this question - <a href="https://stackoverflow.com/questions/21355111/">Vertically center image on page and maintain aspect ratio on resize</a>, but:<br>
  1. I want <code>&lt;div&gt;</code> to be flexible, not <code>&lt;img&gt;</code>,<br>
  2. In the <a href="https://stackoverflow.com/questions/21355111/#answer-21355203">answer to this question</a> you can see that actual image really keeps ratio, but <code>&lt;img&gt;</code> container itself does not.</p>
  
  <p>Is there a way to make <code>&lt;div&gt;</code> keep the aspect ratio of an image only with CSS? No matter if it's a background image or a separate<code>&lt;img&gt;</code>?</p>
  
  <p>HTML5, CSS3 methods are preferred</p>