Задать вопрос
@galina_nj

Как правильно адаптировать изображение под разные размеры экрана?

Добрый день!

У меня есть web страница на которой размещен баннер.
Сейчас это div для которого я задала background.
Для элемента div я прописала свойства
width: 100%;
background-repeat: no-repeat;
background-size: cover;

и для разных разрешений экрана прописала media запрос, в котором указала конкретное изображение, например
media screen and (min-width: 1681px){
.banner {
background: url('../img/1920x563.jpg');
}
}
media screen and (min-width: 1601px) and (max-width: 1680px){
.banner {
background: url('../img/1680x492.jpg');
}
}
и т.д

Все отрабатывает хорошо, но сомневаюсь на сколько такой подход оптимальный, т.к. у меня получилось большое кол-во media запросов.
Подскажите может существуют другие техники адаптации изображений?
  • Вопрос задан
  • 2122 просмотра
Подписаться 1 Оценить 3 комментария
Пригласить эксперта
Ответы на вопрос 1
@kulaeff
Front-end developer
А зачем так делать? Пусть будет одно изображение шириной 1920, браузер сам отмасштабирует, если указан background-size: cover. А если вам пофиг на IE, то можно использовать тег picture.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы