CSS свойства zoom

Свойство zoom используется для изменения масштаба контента. Свойство transform имеет значение "scale()", которое также может быть использовано для изменения масштаба вместо свойства zoom.

Значение по умолчанию normal
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да
Версия Safari CSS Reference.
DOM синтаксис object.style.zoom = "4";

Синтаксис

zoom: normal | number | percentage | reset | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.element{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      display: inline-block;
      zoom: 2;
      }
      div#grey{
      background-color: #666;
      zoom: normal;
      }
      div#blue{
      background-color: #1c87c9;
      zoom: 300%;
      }
      div#green{
      background-color: #8ebf42;
      zoom: 5;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства zoom</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

Значения

Значение Описание
normal Указывает нормальный размер элемента.
number Коэффициент масштабирования. Равен соответствующему проценту (1.0 = 100% = normal). Значения больше 1.0 увеличивают. Значения меньше 1.0 уменьшают.
percentage Указывает значение в процентах. 100% равен значению normal.
reset Не увеличивает элемент, если пользователь применяет к документу non-pinch-based масштабирование.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 4.0+ 15.0+

Практикуйте свои знания

Какое утверждение правильно описывает свойство CSS zoom?
Считаете ли это полезным?