Закрыть

Для эффективной работы на сайте используются cookie и обработка персональных данных. Пользуясь этим сайтом, вы соглашаетесь с правилами использования сайта. Подробнее

Цитата дня

Vivazzi.ru

Личный сайт Мальцева Артема

Если человек стремится к чему-то всем своим сердцем, он обязательно сумеет добиться того, чего хочет, даже если это кажется невозможным, даже если все окружающие открыто заявляют ему, что это невозможно.

Чак Норрис

Адаптация картинок под разрешения с высокой плотностью пикселей

20 ноября 2014 г. 0:22

Данный код позволяет подставлять увеличенные в два раза картинки для экранов, разрешения которых имеют высокую плотность пикселей.

.selector {background: url(../path_to_image/image.png) no-repeat; width: 10px; height: 10px;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
 .selector {background-image: url(../path_to_image/image_2x.png); background-size: 100%;}
}

Если требуется использовать фоновый паттерн (повторяющийся узор), то код перепишется следующим образом:

.selector {background: url(../path_to_image/image.png) repeat;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
 .selector {background-image: url(../path_to_image/image_2x.png); background-size: 10px 10px;}
}

Можно рассмотреть более сложный случай: адаптация изображений, которые выравниваются по центру в блоке:

.form_c .forms {display: block;position: relative;width: 70px;}
.form_c .feedback {background: url('../images/feedback.png') no-repeat 50% 50%;height: 32px;}
.form_c .callback {background: url('../images/callback.png') no-repeat 50% 50%;height: 34px;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
    .form_c .feedback {background-image: url('../images/feedback_x2.png');background-size: 26px 32px;}
}

Код взят с самого сайта нашей веб-студии Viva IT Studio, поэтому особо комментировать не буду - можете просто зайти на сайт и посмотреть как он работает.

Есть и другие способы адаптации картинок (с помощью js и т. д.), но я не стал их приводить, потому что этот способ эффективный с точки зрения производительности и код css не особо увеличивается.

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

0 из 5 (всего 0 оценок)

Поля, отмеченные звёздочкой ( * ) , являются обязательными.

Спасибо за ваш отзыв!

Автор статьи

Права на использование данной статьи, расположенной на настоящей странице http://vivazzi.ru/it/image-adapting/:

Разрешается копировать статью с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Мальцев Артём
Ссылка на статью: <a href="http://vivazzi.ru/it/image-adapting/">http://vivazzi.ru/it/image-adapting/</a>

Подробнее: Правила использования сайта

Вам нужно саморазвиваться или вы хотите зарабатывать деньги?

Или вы ищите хорошие IT сервисы или книги? Сохраните свое время и взгляните на мою подборку рекомендаций, которыми постоянно пользуюсь.
Посмотреть рекомендации

Комментариев: 0

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

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте