CSS свойства zoom

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

Zoom является нестандартным свойством и используется только в Internet Explorer.

Для максимальной совместимости браузера вместе с данным свойством используется расширение -ms- для Internet Explorer.

Значение по умолчанию 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 Значение элемента наследуется от родительского элемента.





Похожие статьи