Método de uso cruzado de la transformación: propiedad scale css?

Question

que tienen las siguientes reglas CSS:

-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
    -moz-transform: scale(0.5); /* FF3.5+ */ 
     -ms-transform: scale(0.5); /* IE9 */ 
     -o-transform: scale(0.5); /* Opera 10.5+ */ 
      transform: scale(0.5); 

que tengo la intención de aplicar a un div con el fin de modificar la escala, incluyendo todos sus contenidos, imágenes, etc, a 50% de su tamaño, manteniendo el mismo centro. Como probablemente sepa, las reglas que enumeré hacen exactamente eso, excepto IE7-8.

Según this site, el equivalente, MS regla propietaria sería:

/* IE8+ - must be on one line, unfortunately */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')"; 

    /* IE6 and 7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.5, 
      M12=0, 
      M21=0, 
      M22=0.5, 
      SizingMethod='auto expand'); 

Sin embargo, estos no parecen cambiar el tamaño de hecho el contenido del div, que parece cambiar su posición, pero eso es todo.

CSS3Please.com informes diferentes valores de la matriz para ser el equivalente de la escala (0,5):

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
        M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand'); 

He probado estos aswell, pero el efecto era el mismo; el div pareció cambiar su posición, pero el tamaño real de su contenido permaneció sin cambios.

Finalmente he intentado transformie.js, que calcula la matriz a través sylvester.js automáticamente a medida que asigna la propiedad transform, pero el resultado final era todavía:

M11=0.5, M12=0, M21=0, M22=0.5 

Exactamente el mismo que el que he intentado en primer lugar, el cual aparentemente no hizo nada más que cambiar la posición del div.

Me gustaría tratar cssSandpaper.js, pero se ve bastante hinchada por lo que pienso hacer, además no hay puerto de jQuery y no me siento como la adición de cssQuery al proyecto sólo para eso. Es probable que los resultados sean los mismos que genera transform.js, porque parece que también usa sylvester.js.

Edit: también trató this que parece provenir de Microsoft directamente, y sugiere el siguiente método de cálculo matricial:

function resizeUsingFilters(obj, flMultiplier) { 
    // If you don't do this at least once then you will get an error 
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 
    // Resize 
    obj.filters.item(0).M11 *= flMultiplier; 
    obj.filters.item(0).M12 *= flMultiplier; 
    obj.filters.item(0).M21 *= flMultiplier; 
    obj.filters.item(0).M22 *= flMultiplier; 
} 

Desafortunadamente esto no escala el contenido de la misma, ya sea div. Parece que esto puede no ser posible en absoluto, pero:

¿Cómo se puede simular el transform: scale moderno en IE8-7, de modo que también cambie el tamaño de los contenidos div internos?

Quizás estoy buscando algo que no existe, pero quería estar seguro. Todas las pruebas se han realizado utilizando IE9 en modo de compatibilidad para IE8 e IE7 (hasta ahora siempre ha hecho el trabajo, no creo que sea poco fiable, pero no dude en corregirme si piensa lo contrario)

Answer 1

Estoy un poco confundido por tu explicación. This fiddle en IE7-8 me ayuda a escalar los elementos internos con el primer conjunto de códigos que publicó (aunque indica que no estaba escalando, solo cambiando de posición). Lo que ese código hace no do (y no se puede hacer) es escalar desde el punto central (es desde la esquina superior izquierda), y la transformación de matriz no puede acomodar una traducción (solo "Resizes, rotates, or reverses the content of the object"), por lo que no es "mantener mismo centro "como usted indica que desea.

Hay una página que encontré similar al transformie.js que anotó en la transformación de ejecución, pero this other page habla del problema del origen de la transformación que se está centrando. En última instancia, para obtener la apariencia de ser escalado en el centro, debe incluir un cálculo de algún tipo para hacer un desplazamiento del elemento usando position: relative.

En this fiddle he tomado con calma en mí mismo para hacer este cálculo de forma manual mediante el establecimiento de un width en el div envolver y conociendo la height basado en los tamaños internos. Esto podría complicarse con cualquier tamaño dinámico, pero creo que the link above da los cálculos para hacerlo dinámicamente usando javascript (JQuery) con sylvester.js también.

Answer 2

También puede utilizar la propiedad de zoom de IE:

zoom: 0,5

Esto debería hacer lo que quieres que haga.