Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

css zoom

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

Оцените статью

Еще статьи

CSS before after

Градиенты CSS

CSS валидация

CSS supports

marquee html

DOMParser

Интерфейс MediaDevicesInfo в javascript

css zoom

read-write css

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке