zoom

Базовая версия 2024

Новое

С мая 2024 года эта функция работает на последних устройствах и версиях браузеров. Возможны проблемы с её работоспособностью на более старых устройствах или браузерах.

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

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

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

Синтаксис

/* <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 и предотвращает масштабирование элемента, если пользователь использует масштабирование без использования pinch-жестов (например, нажатием клавиш Ctrl - - или Ctrl + +).

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

Начальное значение	`normal`
Применимо к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не может быть анимирован

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

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

Примеры

Масштабирование абзацев

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

HTML

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

CSS

.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);
}

В этом последнем блоке 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);

Результат

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

Спецификация
Модуль CSS Viewport уровень 1 # zoom-property

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`zoom`	1	12	126	15	3.1	18	126	14	3	1.0	4.4
`reset`	1–59	Нет	Нет	15–46	3.1	18–59	Нет	14–43	3	1.0–7.0	4.4–59

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom