Респонсив и разные картинки, стоит ли?

Question

[Rudy Dudy]

Здравствуйте!
Есть большие беграундовые картинки ( прописаны через background-image ) 1920\600 припустим, на планшетах и телефонах они сильно сжимаются и обрезается сама картинка ( видно пол головы и т.д), что если на респонсив показывать картинку меньшего размера.
Вот если это реализовать на верстке: Есть у нас враппер банера в нем лежать три блока с трема разными картинками ( дизайнеры подогнали все три картинки) и через медия запросы мы будем показывать нужный нам блок к картинок?. На десктопах будет видно только класс припустим бг-лг. на 991 уже видно будет бг-см, а на 767 будет видно бг-хс.
Какие есть минуса этого всего? Ну кроме лишнеих двух дивов + самих картинок? Речь идет именно о банерах, то есть по сути будет всего + две картинки на страницу.

Answer 1

[Дима Паутов]

html5 picture

Comments

[Rudy Dudy]

Классная штука, не знал о такой. но вот на кенайюз показывает что совсем не поддерживается в 11ешке и менше 9 иос.

[Дима Паутов]

Zen Ter: вы можете использовать 1 див и в медиа запросах менять у него фон

[Rudy Dudy]

Дима Турков: Фон прописывается в хмтл инлайн стайлом, что бы в cms было легко выводить картинки без лишнего кода в цсс.

[Дима Паутов]

Zen Ter: Вообщем всё решается через picture или несколько дивов в твоём случае. Суть от этого не меняется, используется несколько изображений разных разрешений. picture лишь удобней и интуитивно понятней. Что из этого юзать, решать тебе. Так же, ты можешь погуглить полифилы для picture, если хочется юзать picture и не думать об старых браузерах

Answer 2

[chimir]

прописаны через background-image

Так и используйте через фон, зачем вам доп. блоки, а в медиа выражениях задавайте соответствующую картинку для фона. Подход используйте mobile first, то есть изначально задавайте маленькое изображение

Comments

[Rudy Dudy]

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

Answer 3

[Alibek Kulseitov]

А разве нельзя использовать через img ?

img { object-fit: cover; width: 100%; height: 100%; display: block}