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

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

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 вами был Грибин Андрей! До скорого!

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

Еще статьи

iframe javaScript

Откат GIT

Метки GIT

JavaScript мышь

HTML Visibility

template html

clip css

память выделяемая php

Как установить go

Комментарии

Проверочный код

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

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.