¿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 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?
Ya está funcionando perfectamente. ¿Hay algún método para cambiar -moz-transform factor de escala a porcentaje – shahul
? Es un porcentaje en forma decimal. (1 = 100% 2 = 200% 0.2 = 20%) Pero creo que también puedes usar la notación porcentual. http://www.w3.org/TR/css3-values/#percentages – sholsinger
El problema con esto es cuando tienes elementos de posición fijos. Zoom funciona de una manera diferente a la escala de transformación. –
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.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
zoom: 145%;
-moz-transform: scale(1.45);
uso que se trata en el lado seguro
Esto acerca 2x en webkit. Puño por zoom, segundo por escala –
Zoom y transformación de escala no son la misma cosa. 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% anidado 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).
¿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);
}
Realiza un zoom todo el contenido en un 50%.
Para mí esto funciona para contrarrestar la diferencia entre el zoom y la escala transformar, ajuste para el origen destinado deseada:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Uso scale en su lugar! Después de muchas investigaciones y pruebas que he hecho de este plugin para lograrlo navegadores:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').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:
Se va a crear un envoltorio con una clase scaleContainer. Cuídate mientras diseñas el contenido.
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 el uso tanto de una escala y una traducción, y también la adición de la altura y el peso original y luego ajustar la altura y el peso de la div sí:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
cambiar Obviamente, estas a tus propias necesidades Me dio el mismo resultado en todos los navegadores.
Cambiaría zoom por transform en todos los casos porque, como se explica en otras respuestas, no son equivalentes. En mi caso, también fue necesario aplicar la propiedad 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;
respuesta sólo correcta y compatible W3C es: <html> objeto y rem. transformación no funciona correctamente si se cambia la escala hacia abajo (por ejemplo, la escala (0,5)
Uso:.
html
{
font-size: 1mm; /* or your favorite unit */
}
y utilizar en su código de unidad "rem" (incluyendo estilos para <body>) unidades métricas lugar. "%" s sin cambios. Para todos los fondos, establezca el tamaño de fondo. Defina el tamaño de fuente para el cuerpo, que sea heredado por otros elementos.
si se produce alguna condición que active el zoom distinto de 1.0 cambie el tamaño de fuente para etiqueta (a través de CSS o JS).
por ejemplo:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Esto hace equivalente de zoom: 0,5 sin problemas en JS con clientX y posicionamiento durante los eventos de arrastrar y soltar.
No utilice "rem" en las consultas de medios.
Realmente no necesita ampliar, pero en algunos casos puede ser un método más rápido para sitios existentes.
Te remito a [esta pregunta] (http://stackoverflow.com/questions/1156278/css-how-to-scale-entire-web-page-with-css) que responde bastante a la tuya. – Ben