Клавиша / esc

zoom

Меняем масштаб элемента.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство zoom изменяет масштаб элемента. Если меньше 1 или 100%, то элемент уменьшится. А если больше 1 или 100%, то элемент увеличится.

Пример

Скопировано
        
          
          <p class="small-text">При наведении текст уменьшается на 50%<p><p class="normal-text">Сохраняется исходный размер текста<p><p class="big-text">При наведении текст увеличивается в 2 раза<p>
          <p class="small-text">При наведении текст уменьшается на 50%<p>
<p class="normal-text">Сохраняется исходный размер текста<p>
<p class="big-text">При наведении текст увеличивается в 2 раза<p>

        
        
          
        
      
        
          
          .small-text:hover {  zoom: 50%;}.normal-text:hover {  zoom: normal;}.big-text:hover {  zoom: 2;}
          .small-text:hover {
  zoom: 50%;
}

.normal-text:hover {
  zoom: normal;
}

.big-text:hover {
  zoom: 2;
}

        
        
          
        
      

Как пишется

Скопировано

У zoom есть четыре значения:

  • normal — задаёт элементу исходный масштаб. Значение по умолчанию.
  • число — коэффициент масштабирования. 1.0 эквивалентно значению normal.
  • процент — процентное значение. 100% эквивалентно значению normal.
  • reset — не изменяет масштаб элемента, если пользователь применяет к документу масштабирование без сведения (разведения) пальцев, т. е. масштабирование, применимое к сенсорным интерфейсам. Это нестандартное значение, перед его использованием следует проверить поддержку на Can I use.

Подсказки

Скопировано

💡 Значение свойства не наследуется.

💡 Применимо ко всем элементам.

💡 Свойство можно анимировать.