Qu’est-ce que le zoom fait en CSS?

J’ai trouvé que certains plugins jQuery, dans leur règle CSS, utilisaient le descripteur ‘zoom’, j’ai même regardé sur le site web w3c et constaté qu’il était utilisé pour agrandir, mais comment puis-je réellement l’implémenter? Ou je dois définir une fenêtre d’affichage? Et comment définir une telle fenêtre d’affichage? Ou je me trompe sur tout ça?

est-il possible de l’utiliser comme

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

Le zoom n’est pas inclus dans la spécification CSS, mais il est pris en charge dans IE, Safari 4, Chrome (et vous pouvez obtenir un effet similaire dans Firefox avec -moz-transform: scale(x) depuis 3.5). Voir ici

Donc, tous les navigateurs

  zoom: 2; zoom: 200%; 

zoomera votre object de 2, c’est comme doubler la taille. Ce qui signifie que si vous avez

 a:hover { zoom: 2; } 

En vol stationnaire, la balise zoomera de 200%.

Comme je le dis, dans FireFox 3.5+, utilisez -moz-transform: scale(x) , cela fait beaucoup de même.

Edit: En réponse au commentaire de thirtydot , je dirai que scale() n’est pas un remplacement complet. Il ne s’étend pas en ligne comme le fait le zoom , mais il s’étend au-delà du contenu, sans forcer les autres contenus. Voir ceci en action ici . De plus, il semble que le zoom ne soit pas pris en charge dans Opera.

Cet article donne un aperçu utile des méthodes permettant de contourner les incompatibilités avec l’ scale et les solutions de contournement à l’aide de jQuery.

Surpris que personne n’ait mentionné ce zoom: 1; est utile pour IE6-7, pour résoudre la plupart des bogues IE uniquement en déclenchant hasLayout .

Cette propriété contrôle le niveau d’agrandissement de l’élément en cours. L’effet de rendu de l’élément est celui d’une fonction de «zoom» sur une caméra. Même si cette propriété n’est pas héritée, elle affecte toujours le rendu des éléments enfants.

Exemple

  div { zoom: 200% } 
This is x2 text

zoom est une spécification css3 pour le descripteur @viewport, comme décrit ici

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

utilisé pour zoomer la totalité de la fenêtre d’affichage (“écran”). il arrive également de zoomer des éléments individuels dans de nombreux navigateurs, mais pas tous. css3 spécifie transform: l’échelle doit être utilisée pour obtenir un tel effet:

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

mais cela fonctionne un peu différent du «zoom d’élément» dans les navigateurs qui le supportent.

Seuls IE et WebKit prennent en charge le zoom, et oui, en théorie, il fait exactement ce que vous dites.

Essayez-le sur une image pour voir son plein effet 🙂

La propriété de zoom CSS est largement prise en charge maintenant> 86% de la population totale des navigateurs.

Voir: 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

Comme l’a souligné Joshua M, la fonction de zoom n’est pas prise en charge uniquement dans Firefox, mais vous pouvez simplement la corriger comme indiqué ci-dessous:

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