Scale div con su contenido para adaptarse a la ventana

Tengo un

tamaño fijo con contenido complejo (incluyendo texto e imágenes de fondo). Este

tiene su tamaño codificado en píxeles (y su contenido depende de este tamaño, y las posiciones del contenido también están codificadas en píxeles).

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

Necesito escalar ese div y el contenido dentro de él, manteniendo su relación de aspecto, para que se ajuste a la ventana.

Una solución que no requiera que cambie manualmente los contenidos de

es preferible (se genera dinámicamente y es un montón de código heredado muy complicado que me gustaría evitar tocar). Las soluciones de JavaScript (jQuery) son correctas (incluidas las que cambian el contenido generado, siempre que se realice post-factum de la propia generación).

Intenté jugar con transform: scale() , pero no produjo resultados satisfactorios. Vea aquí: http://jsfiddle.net/sJkLn/1/ . (Espero que el fondo rojo no sea visible, es decir, el tamaño externo

no se debe estirar por las dimensiones originales de la escala

).

¿Alguna pista?

No estoy del todo seguro de si esto satisface sus necesidades, pero tal vez sirva de estímulo para otras ideas, de lo contrario.

Aquí estoy usando transition: scale() para administrar el tamaño del div que necesita ser escalado proporcionalmente. transform-origin se establece en la top left para mantener el div abrazando la esquina superior izquierda.

Cuando el div requiere escalar, su div de envoltura también se dimensiona. Esto debería permitir que otro contenido en la página fluya correctamente a medida que se cambia el tamaño del navegador. Si el div de envoltura no existe, puede agregar uno dinámicamente usando $.wrap() aunque puede ser ‘ interesante ‘ averiguar qué estilos transferir para mantener el diseño general funcionando sin problemas.

Demo Fiddle Demo con contenido

CSS:

 #wrap { position: relative; width: 640px; height: 480px; background-color: red; } #outer { position: relative; width: 640px; height: 480px; background: url('http://placekitten.com/640/480') no-repeat center center; -webkit-transform-origin: top left; } 

Código:

 var maxWidth = $('#outer').width(); var maxHeight = $('#outer').height(); $(window).resize(function(evt) { var $window = $(window); var width = $window.width(); var height = $window.height(); var scale; // early exit if(width >= maxWidth && height >= maxHeight) { $('#outer').css({'-webkit-transform': ''}); $('#wrap').css({ width: '', height: '' }); return; } scale = Math.min(width/maxWidth, height/maxHeight); $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'}); $('#wrap').css({ width: maxWidth * scale, height: maxHeight * scale }); }); 

Si necesita establecer esto dinámicamente en función de la ventana, también puede establecer el div en un porcentaje de ventana inmobiliaria disponible.

  jQuery(document).ready(function ($) { var percentChange = .66; var newWidth = $(window).width() * percentChange; $('#primary').css('width', newWidth + 'px'); }); 

Siempre que establezca las dimensiones del contenido% basado, entonces podrá cambiar el tamaño dinámicamente según el div externo. Entonces solo usa jQuery:

 jQuery(document).ready(function ($) { var newWidth = '300px'; $('.your-div').css('width', newWidth); });