Привет всем! Сегодня будет рассмотрено достаточно молодое и слабо поддерживаемое свойство css - zoom. На данный момент его поддержка замечена только в браузере google chrome. Однако я все равно расскажу о нем, так как возможно в ближайшем будущем ситуация изменится. И так, поехали!

С помощью свойства zoom мы можем масштабировать элемент, то есть изменять его масштаб. Похожий эффект создает свойство transform с функцией scale(), оно в отличие от zoom поддерживается всеми современными браузерами. Но в действиях transform:scale(); и zoom есть некоторые различия. Сейчас мы это рассмотрим.

Допустим у нас есть такой код:

<style>
  .block{
      text-align:center;
    }

    .block img{
        width:500px;
      }
</style>
<div class="block">
    <img src="slide4.jpg"/>
    <p>Какой то текст</p>
</div>

и мы хотим масштабировать элемент с классом block, к примеру 0.5

Для начала попробуем transform:scale():

.block{
    text-align:center;
    transform:scale(0.5);
}

а затем zoom:

.block{
    text-align:center;
    zoom:0.5;
}

Здесь мы видим явное отличие в работе этих свойств. Поясню, свойство transform:scale() масштабирует элемент относительно его центра, то есть позиция элемента с масштабированием не меняется. Свойство zoom отрабатывает как положено, элемент масштабируется относительно страницы на которой находится. Вот вам и главное отличие. Эффект свойства zoom можно сравнить когда вы масштабируете страницу используя горячие клавиши ctrl + и ctrl -, только здесь вы применяете масштабирование к определенному элементу.

Свойство zoom также может принимать значения в процентах.

.block{
    text-align:center;
    zoom:50%;
}

То же самое что и 0.5.

.block{
    text-align:center;
    zoom:200%;
}

А здесь мы увеличили элемент в два раза.

Значения zoom по умолчанию - normal, 100%, 1

Для сброса масштабирования можно использовать значения - reset или unset.

Поддерживаются стандартные значения css - inherit и initial.

На этом можно заканчивать! Сегодня мы познакомились с новым свойством zoom позволяющим масштабировать элемент и рассмотрели различия с transform:scale();

Если данная статья оказалась для вас полезной, подписывайтесь на мою группу Вконтакте и канал на youtube. C вами был Грибин Андрей! До скорого!