title: Scale div with its content to fit window
body: <p>I have a fixed-size <code>&lt;div&gt;</code> with some complex content (including text and background images). This <code>&lt;div&gt;</code> has its size hardcoded in pixels (and its content depends on this size, and content positions are hardcoded in pixels as well).</p>
  
  <p>Here is a greatly simplified example: <a href="http://jsfiddle.net/dg3kj/" rel="noreferrer">http://jsfiddle.net/dg3kj/</a>.</p>
  
  <p>I need to scale that div and the content inside it, maintaining its aspect ratio, so it fits the window. </p>
  
  <p>A solution that would not require me to manually change <code>&lt;div&gt;</code> contents is preferable (it is generated dynamically and is a bunch of very messy legacy code which I would like to avoid touching). JavaScript (jQuery) solutions are OK (including ones that change the generated content — as long as it is done post-factum of generation itself).</p>
  
  <p>I tried to play with <code>transform: scale()</code>, but it did not yield satisfactory results. See here: <a href="http://jsfiddle.net/sJkLn/1/" rel="noreferrer">http://jsfiddle.net/sJkLn/1/</a>. (I expect the red background to be not visible — i.e. outermost <code>&lt;div&gt;</code> size should not be stretched by the <em>original</em> dimensions of scaled down <code>&lt;div&gt;</code>.)</p>
  
  <p>Any clues?</p>