zoom

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

        
          
          <p class="small">Уменьшили на 50%<p><p class="normal">Оставили обычный размер<p><p class="big">Увеличили в 2 раза<p>
          <p class="small">Уменьшили на 50%<p>
<p class="normal">Оставили обычный размер<p>
<p class="big">Увеличили в 2 раза<p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

.normal {
  zoom: normal;
}

.big {
  zoom: 2;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

• normal — задаёт элементу исходный масштаб. Значение по умолчанию.
• число — коэффициент масштабирования. 1 то же самое, что normal или 100%.
• процент — процентное значение. 100% эквивалентно значению normal.
• reset — не изменяет масштаб элемента, если пользователь масштабирует без жеста «сведения-разведения пальцев». К этому относится, например, комбинация клавиш вроде Ctrl + или Cmd +. У этого значения плохая поддержка, перед использованием загляните в Can I use.

Используйте zoom с осторожностью: это свойство не только масштабирует элемент, но и влияет на расположение соседей, вызывая перерасчёт макета (reflow). Это может ухудшить производительность, особенно в анимациях.

Чтобы увеличить элемент без влияния на соседей, примените transform: scale() или сразу свойство scale. Они не вызывают reflow, но могут привести к переполнению, и тогда появится скроллбар.

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

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

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