Свойство CSS zoom

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

note
В отличие от transform: scale(), который влияет только на слой отрисовки, zoom масштабирует и макет, и отрисовку. Это означает, что элементы с zoom влияют на поток документа и окружающие элементы, тогда как transform — нет.

WARNING

Эта функция не является стандартом, и не рекомендуется использовать её на продакшен-сайтах, поскольку она не поддерживается в Firefox. Поэтому для изменения размера элемента сайта лучше использовать transform: scale().

Начальное значение	normal
Применяется ко	Всем элементам.
Наследуется	Нет.
Анимация	Да.
Версия	Нестандартное
DOM-синтаксис	object.style.zoom = "4";

Синтаксис

Значения CSS zoom

css

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

Пример свойства zoom:

Пример кода CSS zoom

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
    <div id="grey" class="element"></div>
    <div id="blue" class="element"></div>
    <div id="green" class="element"></div>
  </body>
</html>

Try it Yourself »

Результат

CSS zoom description table

На изображении показаны три круга, масштабированные с разными коэффициентами: серый круг использует normal (1x), синий — 300% (3x), а зелёный — 5 (5x). Обратите внимание, как большие круги выталкивают окружающий макет наружу, демонстрируя поведение масштабирования макета у zoom.

Значения

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

Практика

Если возможно, вместо этого свойства следует использовать свойство `__`.

transform: rotate()transform: translate()transform: scale()transform: skew()

Свойство CSS zoom ​

Синтаксис ​

Пример свойства zoom: ​

Результат ​