Что делает 'zoom' в CSS?

Question

Что делает 'zoom' в CSS?

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

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

a {

    zoom:1;

}



a:hover {

   zoom:2;

}

375 7

css

7 ответов:

Comments

Ничего не найдено.

Joshua M · Accepted Answer · 2015-06-09 22:43:55

Zoom не входит в спецификацию 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), это почти то же самое.

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

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

Ilia Akhmadullin · Accepted Answer · 2015-04-10 16:50:52

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

Scriptor · Accepted Answer · 2012-04-23 13:36:09

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

пример
 div { zoom: 200% }
 <div style=”zoom: 200%”>This is x2 text </div>

commonpike · Accepted Answer · 2015-03-30 11:32:18

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

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

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

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

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

Rudi Visser · Accepted Answer · 2012-04-23 16:49:49

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

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

Adesh M · Accepted Answer · 2017-01-06 13:32:06

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>

Key-Six · Accepted Answer · 2012-04-23 13:33:45

Как отметил Джошуа м, функция масштабирования не поддерживается только в Firefox, но вы можете просто исправить это, как показано:
div.zoom {
  zoom: 2; /* all browsers */
 -moz-transform: scale(2);  /* Firefox */
}