X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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



Считаете ли это полезным?

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