Tengo un tamaño fijo<div> con algún contenido complejo (incluyendo texto e imágenes de fondo). Esta<div> tiene su tamaño codificado en píxeles (y su contenido depende de este tamaño, y las posiciones de contenido también están codificadas en píxeles).

Aquí hay un ejemplo muy simplificado:http://jsfiddle.net/dg3kj/.

Necesito escalar esa división y el contenido dentro de ella, manteniendo su relación de aspecto, para que se ajuste a la ventana.

Una solución que no me obligaría a cambiar manualmente.<div> el contenido es preferible (se genera dinámicamente y es un montón de código heredado muy desordenado que me gustaría evitar tocar). Las soluciones de JavaScript (jQuery) están bien (incluidas las que cambian el contenido generado, siempre que se realicen después de la generación en sí).

Traté de jugar contransform: scale(), pero no dio resultados satisfactorios. Mira aquí:http://jsfiddle.net/sJkLn/1/. (Espero que el fondo rojo no sea visible, es decir, más externo<div> el tamaño no debe ser estirado por eloriginal dimensiones de escalado<div>.)

¿Alguna pista?