Skaliere div mit seinem Inhalt so, dass er zum Fenster passt

Ich habe eine feste Größe<div> mit einigen komplexen Inhalten (einschließlich Text und Hintergrundbildern). Diese<div> Die Größe ist in Pixeln fest codiert (und der Inhalt hängt von dieser Größe ab, und die Inhaltspositionen sind auch in Pixeln fest codiert).

Hier ist ein stark vereinfachtes Beispiel:http://jsfiddle.net/dg3kj/.

Ich muss dieses Div und den Inhalt darin skalieren und dabei das Seitenverhältnis beibehalten, damit es in das Fenster passt.

Eine Lösung, die ich nicht manuell ändern müsste<div> Inhalt ist vorzuziehen (er wird dynamisch generiert und besteht aus einer Menge sehr unordentlichem Legacy-Code, den ich nicht berühren möchte). JavaScript (jQuery) -Lösungen sind in Ordnung (einschließlich solcher, die den generierten Inhalt ändern - sofern dies nach der eigentlichen Generierung erfolgt).

Ich habe versucht, mit zu spielentransform: scale(), aber es ergab keine zufriedenstellenden Ergebnisse. Siehe hier:http://jsfiddle.net/sJkLn/1/. (Ich erwarte, dass der rote Hintergrund nicht sichtbar ist - d. H. Der äußerste<div> Größe sollte nicht durch die gedehnt werdenOriginal Abmessungen verkleinert<div>.)

Irgendwelche Hinweise?