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

82

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

La zoompropiedad funciona en IE, Google Chrome y Safari, pero no funciona en Firefox y Opera.

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

css firefox cross-browser zoom opera SABU
fuente
1
Lo referiría a esta pregunta que responde a la suya bastante a fondo.
Ben

Respuestas:

80

Prueba este código, esto funcionará:

-moz-transform: scale(2);

Puede hacer referencia a esto .

Mubeen
fuente
2
Sí, esto está funcionando perfectamente. ¿Existe algún método para cambiar el factor de escala de transformación
Es un porcentaje en forma decimal. (1 = 100% 2 = 200% 0.2 = 20%) Pero creo que también puede usar la notación de porcentaje. w3.org/TR/css3-values/#percentages
sholsinger
45
El problema con esto es cuando tienes elementos de posición fija. El zoom funciona de una manera diferente a la escala de transformación.
Tom Roggero
3
Además ... ¿qué sucede cuando ff admite zoom? ¿Este doble zoom? Esto no parece la solución en mi opinión.
Cory Mawhorter
esto no funciona con una imagen de sprite, aunque en realidad necesitamos acercarnos a una parte específica de la imagen.
colin rickels
52

Zoom y escala de transformación no son lo mismo. Se aplican en diferentes momentos. El zoom se aplica antes de que ocurra el renderizado, transform - after. El resultado de esto es que si toma un div con ancho / alto = 100% anidado dentro de otro div, con tamaño fijo, si aplica el zoom, todo dentro de su zoom interno se encogerá o crecerá, pero si aplica transforma todo su El div interno se encogerá (aunque el ancho / alto esté establecido en 100%, no lo serán al 100% después de la transformación).

Ilya Volodin
fuente
35

Para mí, esto funciona para contrarrestar la diferencia entre el zoom y la transformación de escala, ajuste 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;
Russ K.
fuente
8

¡Úselo en su scalelugar! Después de muchas investigaciones y pruebas, hice este complemento para lograrlo en todos los 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:

Creará un contenedor con una clase scaleContainer. Ocúpate de eso mientras estilizas el contenido.


fuente
Puede hacer esto aún más impresionante manejando el ancho del borde del elemento escalado ...width($(this).data('originalWidth') * x + borderWidth)
umutesen
5 
zoom: 145%;
-moz-transform: scale(1.45);

usa esto para estar en el lado más seguro

Divam Gupta
fuente
10
Esto amplía 2x en webkit. Puño por zoom, segundo por escala
Ales Ruzicka
5

Cambiaría zoompor transformen todos los casos porque, como explican otras respuestas, no son equivalentes. En mi caso también fue necesario aplicar transform-originpropiedad para colocar los artículos donde 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;
Álvaro
fuente
1

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>
Ronny Sherer
fuente
1

He estado maldiciendo esto por un tiempo. Zoom definitivamente no es la solución, funciona en Chrome, funciona parcialmente en IE pero mueve todo el div html, 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 en sí:

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

Obviamente, cámbielos a sus propias necesidades. Me dio el mismo resultado en todos los navegadores.

WtFudgE
fuente
¡Esta es la única respuesta correcta! La escala sola deja intacto el tamaño original del elemento.
Honza Zidek
1

prueba este código para hacer zoom en toda la página en fireFox

-moz-transform: scale(2);

si estoy usando este código, toda la página escalada con el desplazamiento yyx no se amplía correctamente

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Simplemente no puede hacer zoom en su página usando css en fireFox

**

Rizo
fuente
0

¿Funciona esto correctamente para usted? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
T.Todua
fuente
0

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%.

Roca
fuente
0

La única respuesta correcta y compatible con W3C es: <html>objeto y rem. la transformación no funciona correctamente si reduce la escala (por ejemplo, escala (0.5).

Utilizar: 

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

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

si ocurre alguna condición que disparará el zoom que no sea 1.0, cambie el tamaño de fuente de la etiqueta (a través de CSS o JS).

por ejemplo:

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

Esto equivale a zoom: 0.5 sin problemas en JS con clientX y posicionamiento durante eventos de arrastrar y soltar.

No utilice "rem" en las consultas de medios.

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

18C
fuente