Свойство zoom в CSS

Определение и использование

zoom Атрибут specifies the zoom scale of the element. The element can be zoomed in or out.

Пример

Пример 1

Для текста использовать zoom Атрибут:

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

Попробуйте сами

Пример 2

Использование zoom Настройка размера элементов атрибутом:

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

Попробуйте сами

Грамматика CSS

zoom: normal|%|number|unset|initial|inherit;

Значение атрибута

Значение Описание
normal Значение по умолчанию. Элементы渲染ятся в нормальном режиме.
%

Указать масштабирование в виде процента.

100% = нормальный.

Для увеличения используйте значения больше 100%.

Для уменьшения используйте значения менее 100%.
number

Указать масштабирование в виде числа (процента).

1.0 = нормальный.

Для увеличения используйте значения больше 1.0.

Для уменьшения используйте значения менее 1.0.
unset Отменить установку масштабирования (восстановить до нормального)
initial Установить этот атрибут в значение по умолчанию. См. initial.
inherit Эта свойство наследуется от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: normal
Инheritability: Нет
Создание анимации: Поддерживается. См.:Свойства анимации.
Версия: Модуль просмотра CSS Viewport Level 1
Грамматика JavaScript: object.style.zoom = "3"

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

Числа в таблице указывают на версию браузера, которая полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0