Свойство CSS zoom
Свойство CSS zoom масштабирует элементы страницы. Это нестандартное свойство, поддерживаемое лишь некоторыми браузерами.
Свойство CSS zoom масштабирует элемент и его содержимое, увеличивая или уменьшая его в заданное число раз. Значение 2 удваивает отрисованный размер, 0.5 — уменьшает вдвое, а normal (значение по умолчанию) оставляет элемент без изменений.
На этой странице описаны синтаксис zoom, все допустимые значения, отличия от transform: scale(), поддержка браузерами и рекомендации по выбору между ними.
Чем zoom отличается от transform: scale()
На первый взгляд эти свойства взаимозаменяемы, однако ведут себя совершенно по-разному:
zoomмасштабирует макет и отрисовку. Масштабированный элемент занимает новый, увеличенный блок в потоке документа, сдвигая соседние элементы в стороны. Браузер также повторно выполняет расчёт макета, поэтому текст перераспределяется чётко по новому размеру.transform: scale()масштабирует только отрисовку. Элемент сохраняет свой исходный блок для целей макета — визуально он увеличивается, но перекрывает соседей, а не сдвигает их, и масштабированные пиксели могут выглядеть слегка размыто.
Используйте zoom, когда нужно, чтобы окружающий макет реагировал на новый размер. Используйте transform: scale() (стандартный, полностью поддерживаемый вариант) для эффектов при наведении, анимаций и всего, что не должно нарушать поток.
zoom является нестандартным и не поддерживается в старых версиях Firefox. Для продакшн-сайтов, которые должны работать везде, предпочтительнее использовать transform: scale() для изменения размера элемента.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируемое | Да. |
| Версия | Нестандартное |
| DOM Синтаксис | object.style.zoom = "4"; |
Синтаксис
Значения CSS zoom
zoom: normal | number | percentage | reset | initial | inherit;На практике чаще всего используются формы number и percentage: zoom: 1.5 и zoom: 150% означают одно и то же.
Пример свойства zoom
В примере ниже отрисовываются три одинаковых круга, каждый масштабируется с разным коэффициентом, что позволяет сравнить normal, значение в процентах и безразмерное число рядом.
<!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>Результат
На изображении показаны три круга, масштабированных с разными коэффициентами: серый круг использует normal (1x), синий — 300% (3x), зелёный — 5 (5x). Обратите внимание, как более крупные круги раздвигают окружающий макет, демонстрируя поведение zoom при масштабировании макета.
Значения
| Значение | Описание |
|---|---|
| normal | Задаёт нормальный размер элемента. |
| number | Коэффициент масштабирования. Эквивалентен соответствующему проценту (1.0 = 100% = normal). Значения больше 1.0 увеличивают. Значения меньше 1.0 уменьшают. |
| percentage | Задаёт значение в процентах. 100% эквивалентно normal. |
| reset | Не увеличивать элемент, если пользователь применяет немасштабирующее по жесту масштабирование документа. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Поддержка браузерами
zoom возникло в Internet Explorer и впоследствии было подхвачено Chrome, Edge, Safari и Opera. Firefox добавил поддержку сравнительно недавно и долгие годы игнорировал это свойство, поэтому воспринимайте его как прогрессивное улучшение, а не как основной инструмент компоновки. Поскольку свойство нестандартное, всегда предоставляйте запасной вариант через transform: scale() для всего критичного.
Связанные свойства
transform— стандартный, полностью поддерживаемый способ масштабирования, поворота, наклона и перемещения элементов.transition— анимация изменения при масштабировании по наведению или фокусу.width— задаёт явный размер вместо коэффициента масштабирования.overflow— управляет поведением при выходе масштабированного элемента за пределы контейнера.