¿Qué hace 'zoom' en CSS?

Question

Encontré que algunos plugins jQuery, en su regla css usan el descriptor 'zoom', incluso busco en el sitio web w3c y encontré 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 el uso de ella como

a { 
    zoom:1; 
} 

a:hover { 
    zoom:2; 
} 

Answer 1

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

Por lo tanto, todos los navegadores

zoom: 2; 
zoom: 200%; 

se enfocar su objeto en un 2, por lo que es como duplicar el tamaño. Lo que significa que si usted tiene

a:hover { 
    zoom: 2; 
} 

En vuelo estacionario, la etiqueta <a> disminuye el tamaño en 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 la línea como lo hace zoom, sino que se expandirá fuera de la caja y sobre el contenido, sin forzar la eliminación de otros contenidos. Consulte esto en acción here. Además, parece que zoom no es compatible con Opera.

This publicación proporciona una visión útil de formas de evitar las incompatibilidades con scale y las soluciones para ello utilizando jQuery.

Answer 2

Solamente el zoom IE y el apoyo WebKit, y sí, en teoría, que hace exactamente lo que está diciendo.

probarlo en una imagen para ver su efecto completo :)

Answer 3

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% } 
<div style=”zoom: 200%”>This is x2 text </div> 

Answer 4

Como Joshua M señaló, la función de zoom no sólo es compatible con Firefox, pero se puede solucionar este problema simplemente como se muestra:

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

Answer 5

Sorprendido de que nadie mencionó que zoom: 1; es útil para IE6-7, para resolver la mayoría de los errores solo de IE desencadenando hasLayout.

Answer 6

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

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

utilizado para ampliar toda la ventana gráfica ('pantalla'). También pasa a hacer zoom de elementos individuales en muchos navegadores, pero no en todos. CSS3 especifica transformar: escala se debe utilizar para lograr tal efecto:

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

pero funciona un poco diferente que el 'elemento de zoom' en aquellos navegadores que lo soportan.

Answer 7

La propiedad CSS zoom es ampliamente compatible ahora> 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%; 
 
}

<div id="sel-000">IMG - Default</div> 
 

 
<div id="sel-001">IMG - 1X</div> 
 

 
<div id="sel-002">IMG - 5X</div> 
 

 
<div id="sel-003">IMG - 3X</div> 
 

 

 
<div id="sel-jsz">JS Zoom - 4x</div>