Что делает "масштабирование" в CSS?

Я обнаружил, что некоторый jQuery-плагин в своем правиле css использует дескриптор масштабирования, я даже смотрю на веб-сайт w3c и обнаружил, что он используется для увеличения, но как я могу его реализовать? Или мне нужно определить какой-то видовой экран? И как определить такой видовой экран? Или я ошибаюсь во всем?

можно использовать его как

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

Ответы

Ответ 1

Масштаб не включен в спецификацию CSS, но поддерживается в IE, Safari 4, Chrome (и вы можете получить несколько схожий эффект в Firefox с -moz-transform: scale(x) начиная с версии 3.5). См. здесь.

Итак, все браузеры

 zoom: 2;
 zoom: 200%;

будет увеличивать ваш объект на 2, поэтому ему нужно удвоить размер. Это означает, что если у вас есть

a:hover {
   zoom: 2;
}

При наведении указатель тега <a> будет увеличиваться на 200%.

Как я уже сказал, в FireFox 3.5+ используйте -moz-transform: scale(x), он делает то же самое.

Изменить: в ответ на комментарий от thirtydot я скажу, что scale() не является полной заменой. Он не расширяется в строке, как zoom, скорее, он будет расширяться из коробки и над контентом, а не заставлять другой контент быть в стороне. См. Это в действии здесь. Кроме того, кажется, что zoom не поддерживается в Opera.

Это сообщение дает полезное представление о способах устранения несовместимостей с scale и обходных путей для него с помощью jQuery.

Ответ 2

Удивленно, что никто не упоминал, что zoom: 1; полезен для IE6-7, чтобы решить большинство ошибок только IE, вызывая hasLayout.

Ответ 3

Это свойство управляет уровнем увеличения для текущего элемента. Эффект рендеринга для элемента - это функция "масштабирования" на камере. Несмотря на то, что это свойство не унаследовано, оно по-прежнему влияет на рендеринг дочерних элементов.

Пример

 div { zoom: 200% }
 <div style="zoom: 200%">This is x2 text </div>

Ответ 4

zoom - это спецификация css3 для дескриптора @viewport, как описано здесь

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

используется для масштабирования всего окна просмотра ( "экран" ). также происходит масштабирование отдельных элементов во многих браузерах, но не все. css3 указывает преобразование: для достижения такого эффекта следует использовать шкалу:

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

но он немного отличается от "масштабного элемента" в тех браузерах, которые его поддерживают.

Ответ 5

Только IE и WebKit поддерживают масштабирование, и да, в теории это делает именно то, что вы говорите.

Попробуйте на изображении, чтобы увидеть его полный эффект:)

Ответ 6

Теперь свойство CSS zoom широко поддерживается > 86% от общей численности пользователей браузера.

Смотрите: 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>

Ответ 7

Как отметил Джошуа М, функция масштабирования не поддерживается только в Firefox, но вы можете просто исправить это, как показано:

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