
Привет всем! Сегодня будет рассмотрено достаточно молодое и слабо поддерживаемое свойство 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 вами был Грибин Андрей! До скорого!