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

20 ноября 2014 г. 5: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 оценок)

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

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

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/image-adapting/:

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

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

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

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

Книга предназначается для широкого круга читателей и, по мнению автора, будет полезна специалистам отдела закупок и логистики, категорийным и финансовым менеджерам, менеджерам по продажам, аналитикам, руководителям и директорам, в компетенции которых принятие решений по управлению ассортиментом.

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

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

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

Попробуйте

Выберите валюту для отображения денежных единиц