Свойство CSS `zoom`

Свойство zoom CSS можно использовать для управления уровнем увеличения элемента. В качестве альтернативы этому свойству можно использовать transform: scale().

Свойство CSS zoom масштабирует целевой элемент, что может повлиять на макет страницы. При масштабировании элемент увеличивается относительно top и center при использовании стандартного writing-mode.

В отличие от этого, масштабирование элемента с помощью scale() не приводит к перерасчёту макета и перемещению других элементов на странице. Если при использовании scale() содержимое становится больше содержащего его элемента, вступает в действие overflow. Кроме того, элементы, масштабированные с помощью scale(), по умолчанию преобразуются относительно center; это можно изменить с помощью свойства CSS transform-origin.

Синтаксис

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Значения

<percentage>

Коэффициент масштабирования. 100% эквивалентно normal. Значения больше 100% увеличивают масштаб. Значения меньше 100% уменьшают масштаб.

<number>

Коэффициент масштабирования. Эквивалентен соответствующему процентному значению (1.0 = 100% = normal). Значения больше 1.0 увеличивают масштаб. Значения меньше 1.0 уменьшают масштаб.

Не рекомендуется использовать два нестандартных ключевых слова. См. данные о совместимости с браузерами:

normal

Отображает элемент в обычном размере; эквивалентно zoom: 1. Вместо этого используйте глобальное ключевое слово unset.

reset

Сбрасывает значение до zoom: 1 и предотвращает увеличение или уменьшение элемента при масштабировании документа пользователем без жеста щипка (например, с помощью сочетаний клавиш Ctrl - - или Ctrl + +).

Формальное определение

Формальный синтаксис

zoom = 
  normal |
  reset |
  <number [0,∞]> ||
  <percentage [0,∞]>

Примеры

Изменение масштаба абзацев

В этом примере элементы абзацев масштабируются. При наведении на абзац значение zoom становится равным unset.

HTML

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Результат

Изменение масштаба элементов

В этом примере элементы div масштабируются с помощью значений normal, <percentage> и <number>.

HTML

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

Результат

Создание элемента управления масштабом

В этом примере поле select используется для изменения уровня масштабирования элемента.

HTML

В первом блоке HTML определяется поле select с различными значениями zoom, которые будут использоваться.

<section class="controls">
  <label for="zoom"
    >Zoom level
    <select name="zoom" id="zoom">
      <option value="0.5">Extra Small</option>
      <option value="0.75">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Large</option>
      <option value="2">Extra Large</option>
    </select>
  </label>
</section>

Во втором блоке добавляется сообщение не поддерживается, которое будет скрыто, если браузер поддерживает zoom.

<p class="zoom-notice">CSS zoom is not supported</p>

В последнем блоке определяется содержимое, масштаб которого будет изменяться.

<section class="content">
  <h1>This is the heading</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

В первом блоке CSS задаётся начальное значение для --zoom-level с помощью пользовательских свойств, а затем оно используется в качестве значения zoom для блока содержимого.

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.controls,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

В последнем блоке CSS проверяется, поддерживает ли браузер zoom, и, если поддерживает, для сообщения не поддерживается задаётся значение display: none;.

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

Этот код JavaScript отслеживает изменение поля выбора и задаёт новое значение --zoom-level для содержимого section, например style="--zoom-level: 1.5;".

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);

Результат

Спецификации

Совместимость с браузерами

См. также

• Свойство zoom в CSS Almanac от CSS-Tricks
• transform
• scale
• Ключевое слово unset
• Устаревшее свойство zoom на CSS-Tricks (2013)