¿Cómo puedo hacer zoom en un elemento HTML en Firefox y Opera?

¿Cómo puedo hacer zoom en un elemento HTML en Firefox y Opera?

La propiedad de zoom funciona en IE, Google Chrome y Safari, pero no funciona en Firefox y Opera.

¿Hay algún método para agregar esta propiedad a Firefox y Opera?

Prueba este código, esto funcionará:

 -moz-transform: scale(2); 

Puedes referirte a esto .

Zoom y transformar escala no son lo mismo. Se aplican en diferentes momentos. Zoom se aplica antes de que ocurra la representación, transformación – después. El resultado de esto es si tomas un div con ancho / alto = 100% nested dentro de otro div, con tamaño fijo, si aplicas zoom, todo dentro de tu zoom interno se encogerá o crecerá, pero si aplicas transformarás tu entero El div interno se contraerá (aunque el ancho / alto esté establecido en 100%, no será 100% después de la transformación).

Para mí, esto funciona para contrarrestar la diferencia entre zoom y transformación de escala, ajustar para el origen deseado deseado:

 zoom: 0.5; -ms-zoom: 0.5; -webkit-zoom: 0.5; -moz-transform: scale(0.5,0.5); -moz-transform-origin: left center; 

¡Usa la scale cambio! Después de muchas investigaciones y pruebas, he hecho este complemento para lograrlo: navegador cruzado:

 $.fn.scale = function(x) { if(!$(this).filter(':visible').length && x!=1)return $(this); if(!$(this).parent().hasClass('scaleContainer')){ $(this).wrap($('
').css('position','relative')); $(this).data({ 'originalWidth':$(this).width(), 'originalHeight':$(this).height()}); } $(this).css({ 'transform': 'scale('+x+')', '-ms-transform': 'scale('+x+')', '-moz-transform': 'scale('+x+')', '-webkit-transform': 'scale('+x+')', 'transform-origin': 'right bottom', '-ms-transform-origin': 'right bottom', '-moz-transform-origin': 'right bottom', '-webkit-transform-origin': 'right bottom', 'position': 'absolute', 'bottom': '0', 'right': '0', }); if(x==1) $(this).unwrap().css('position','static');else $(this).parent() .width($(this).data('originalWidth')*x) .height($(this).data('originalHeight')*x); return $(this); };

usege:

 $(selector).scale(0.5); 

Nota:

scaleContainer un contenedor con una scaleContainer . Cuídate mientras diseñas el contenido.

 zoom: 145%; -moz-transform: scale(1.45); 

utilizar esto para estar en el lado más seguro

Cambiaría el zoom por la transform en todos los casos porque, como se explica en otras respuestas, no son equivalentes. En mi caso, también fue necesario aplicar propiedad de transform-origin para colocar los artículos donde yo quería.

Esto funcionó para mí en Chome, Safari y Firefox:

 transform: scale(0.4); transform-origin: top left; -moz-transform: scale(0.4); -moz-transform-origin: top left; 

No funciona de manera uniforme en todos los navegadores. Fui a: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage y agregué estilo para zoom y -moz-transform. Ejecuté el mismo código en firefox, IE y Chrome y obtuve 3 resultados diferentes.

    

Norwegian Mountain Trip

Pulpit rock

esto funciona correctamente para usted? :

 zoom: 145%; -moz-transform: scale(1.45); -webkit-transform: scale(1.45); scale(1.45); transform: scale(1.45); 

Para mí, esto funciona bien con IE10, Chrome, Firefox y Safari:

  #MyDiv>* { zoom: 50%; -moz-transform: scale(0.5); -webkit-transform: scale(1.0); } 

Esto acerca todo el contenido al 50%.

He estado jurando sobre esto por un tiempo. Zoom definitivamente no es la solución, funciona en Chrome, funciona parcialmente en IE pero mueve todo el html div, firefox no hace nada.

Mi solución que funcionó para mí fue usar una escala y una traducción, y también agregar la altura y el peso originales, y luego establecer la altura y el peso del div mismo:

 #miniPreview { transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3); transform-origin: 1010px 1429px 0px; width: 337px; height: 476px; 

Obviamente cambia esto a tus propias necesidades. Me dio el mismo resultado en todos los navegadores.

Solo la respuesta correcta y compatible con W3C es: object and rem. la transformación no funciona correctamente si se reduce (por ejemplo, escala (0.5)).

Utilizar:

 html { font-size: 1mm; /* or your favorite unit */ } 

y use en su unidad de código “rem” (incluidos los estilos para ) en lugar de unidades métricas. “%” s sin cambios. Para todos los fondos, establezca el tamaño de fondo. Defina el tamaño de fuente para el cuerpo, que es heredado por otros elementos.

si se produce alguna condición que haga un zoom de disparo distinto a 1.0, cambie el tamaño de letra de la etiqueta (a través de CSS o JS).

por ejemplo:

 @media screen and (max-width:320pt) { html { font-size: 0.5mm; } } 

Esto hace el equivalente de zoom: 0.5 sin problemas en JS con clientX y posicionamiento durante eventos de arrastrar y soltar.

No use “rem” en consultas de medios.

Realmente no necesita zoom, pero en algunos casos puede ser un método más rápido para sitios existentes.