zoom
Изменяет масштаб объекта согласно заданному значению.
Синтаксис
Значения
значение Число с плавающей запятой, значение 1.0 соответствует normal . Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. проценты Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal . normal Объект имеет исходный масштаб.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
zoom .zoom:hover
В данном примере масштаб рисунка увеличивается в три раза при наведении на него курсора мыши.
Объектная модель
[window.]document.getElementById(» elementID «).style.zoom
Браузеры
Браузер Internet Explorer с версии 8.0 понимает также свойство — ms-zoom .
Функция scale()
С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:
transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */ transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */
В начале темы, когда мы рассказывали о свойстве transform в целом, упоминалось, что трансформированные элементы могут накладываться на соседние. Наиболее наглядно показать это позволяет именно функция scale().
Параметры функции
В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.
Для более произвольного масштабирования можно указать два параметра — для горизонтали и вертикали соответственно. Например, следующий код увеличит масштаб элемента в четыре раза по горизонтали и в полтора раза по вертикали:
transform: scale(4, 1.5);
Отдельные функции для каждой оси
В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:
- scaleX() — масштабирование по горизонтали X;
- scaleY() — масштабирование по вертикали Y;
- scaleZ() — масштабирование по оси Z.
В качестве параметра принимаются те же числа, что и для основной функции.
Отрицательные числа в параметрах
Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):
transform: scale(1, -1); /* флип по оси X */ transform: scale(-1, 1); /* флип по оси Y */ transform: scale(-1); /* флип по осям X и Y */
При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.
Далее в учебнике: функция наклона skew().
Изменение масштаба браузера для сайта JavaScript для малых экранов
Масштабирование (зум) браузера является полезной функцией, позволяющей увеличить или уменьшить размер содержимого веб-страницы. В этой статье мы рассмотрим, как использовать JavaScript для изменения масштаба браузера на определенном диапазоне ширины окна.
Для чего это нужно?
Изменение масштаба браузера может быть полезным, когда вы хотите оптимизировать отображение вашего веб-сайта на различных устройствах и экранах. Например, вы можете хотеть установить определенный масштаб для экранов среднего размера, чтобы улучшить читаемость и визуальное восприятие на таких устройствах.
Как это работает?
Для изменения масштаба браузера с помощью JavaScript мы будем использовать метод matchMedia, который проверяет условие ширины окна браузера. Если условие выполняется, мы применяем масштабирование для элемента body. При этом мы также добавляем обработчик события resize, чтобы масштабирование автоматически обновлялось при изменении размера окна.
Давайте рассмотрим код по шагам:
1. Определение функции setZoom()
scale()
Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.
Масштабирование с помощью scale(sx, xy) продемонстрировано в табл. 1.
 |
transform: scale(1) | Исходное изображение. |
|
transform: scale(1.2) | Увеличение масштаба в 1,2 раза. |
|
transform: scale(1.2, 1) | Увеличение масштаба только по горизонтали в 1,2 раза. |
|
transform: scale(0.5) | Уменьшение масштаба в два раза. |
|
transform: scale(-1, 1) | Зеркальное отражение по горизонтали. |
|
transform: scale(1, -1) | Зеркальное отражение по вертикали. |
|
transform: scale(-1) | Зеркальное отражение по горизонтали и вертикали. |
Синтаксис
transform: scale(sx); transform: scale(sx, xy);Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
- значение больше 1 (например: 1.5) приводит к увеличению масштаба;
- значение меньше 1 (например: 0.8) приводит к уменьшению масштаба;
- отрицательное значение (например: -1) зеркально отражает элемент по горизонтали;
- значение 1 оставляет размер элемента исходным и не даёт видимого эффекта.
Одно значение задаёт масштабирование элемента одновременно по горизонтали и вертикали, с сохранением пропорций сторон элемента. Два значения задают масштаб элемента по горизонтали и вертикали независимо, что может привести к искажению пропорций сторон.
Песочница
Пример
В данном примере при наведении указателя на картинку она плавно увеличивает свой масштаб. Чтобы размеры блока оставались исходными используется свойство overflow со значением hidden .
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Transforms Module Level 1 | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 11.5 | 3.1 | 3.5 |
| 2.1 | 3.5 | 12 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.