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