¿Qué hace ‘zoom’ en CSS?

Descubrí que algunos plugins jQuery, en su regla css usan el descriptor ‘zoom’, incluso busco en el sitio web w3c y descubrí que se usa para ampliar pero ¿cómo puedo implementarlo realmente? ¿O tengo que definir alguna ventana gráfica? ¿Y cómo puedo definir esa ventana gráfica? ¿O estoy equivocado sobre todo el asunto?

es posible usarlo como

a { zoom:1; } a:hover { zoom:2; } 

Zoom no está incluido en la especificación CSS, pero es compatible con IE, Safari 4, Chrome (y puedes obtener un efecto similar en Firefox con -moz-transform: scale(x) desde 3.5). Mira aquí .

Entonces, todos los navegadores

  zoom: 2; zoom: 200%; 

acercará tu objeto por 2, por lo que es como duplicar el tamaño. Lo que significa que si tienes

 a:hover { zoom: 2; } 

Al desplazarse, la etiqueta se ampliará un 200%.

Como digo, en FireFox 3.5+ usa -moz-transform: scale(x) , hace más o menos lo mismo.

Editar: En respuesta al comentario de thirtydot , diré que scale() no es un reemplazo completo. No se expande en línea como lo hace el zoom , sino que se expandirá fuera de la caja y sobre el contenido, sin forzar a otro contenido fuera del camino. Mira esto en acción aquí . Además, parece que el zoom no es compatible con Opera.

Esta publicación ofrece una visión útil de cómo evitar las incompatibilidades con la scale y las soluciones alternativas mediante jQuery.

Sorprendido de que nadie haya mencionado ese zoom: 1; es útil para IE6-7, para resolver la mayoría de los errores solo de IE activando hasLayout .

Esta propiedad controla el nivel de ampliación para el elemento actual. El efecto de representación para el elemento es el de una función de “zoom” en una cámara. Aunque esta propiedad no se hereda, aún afecta la representación de elementos secundarios.

Ejemplo

  div { zoom: 200% } 
This is x2 text

zoom es una especificación css3 para el descriptor @viewport, como se describe aquí

http://dev.w3.org/csswg/css-device-adapt/#zoom-desc

utilizado para hacer zoom en toda la ventana gráfica (‘pantalla’). también ocurre al hacer zoom en los elementos individuales en muchos navegadores, pero no en todos. css3 especifica transformación: la escala se debe usar para lograr dicho efecto:

http://www.w3.org/TR/css3-transforms/#transform-functions

pero funciona un poco diferente al ‘zoom de elemento’ en los navegadores que lo soportan.

Solo IE y WebKit admiten zoom, y sí, en teoría, hace exactamente lo que usted dice.

Pruébalo en una imagen para ver su efecto completo 🙂

La propiedad de zoom CSS ahora es ampliamente compatible> 86% de la población total del navegador.

Ver: http://caniuse.com/#search=zoom

 document.querySelector('#sel-jsz').style.zoom = 4; 
 #sel-001 { zoom: 2.5; } #sel-002 { zoom: 5; } #sel-003 { zoom: 300%; } 
 
IMG - Default
IMG - 1X
IMG - 5X
IMG - 3X
JS Zoom - 4x

Como señaló Joshua M, la función de zoom no solo es compatible con Firefox, sino que simplemente puede solucionarlo como se muestra a continuación:

 div.zoom { zoom: 2; /* all browsers */ -moz-transform: scale(2); /* Firefox */ }