Изменение картинки через @media?

Question

[Алексей Струков]

Подскажите плиз, существует ли стабильно работающий способ изменить содержимое атрибута src в теге img через media queries?
Используете ли вы теги img для создания адаптивных картинок или пользуетесь css background-image?

Answer 1

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

Содержимое атрибутов через css менять нельзя. Тут вам только js поможет.
Хотите адаптивные изображения - тег picture вам в помощь!

Comments

[Алексей Струков]

а на сколько критично по Вашему использовать background-image вместо img?
picture вроде как не совместим со старыми версиями браузеров и поэтому не хочу его применять пока

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

Алексей Струков: А как вы сами думаете? background-image это фон блока, а значит вам нужно будет жестко задавать размеры, а img это сам по себе блок, которому не нужно задавать замеры. Не уж то это и так не ясно??
Попробуйте сделать пустой блок с background-image так, что бы фон был пропорционально резиновым?
Для picture есть js полифилы!

[Алексей Струков]

Дима Турков: пустой резиновый блок с бэкграундом сделать не проблема
вопрос в том, с семантической точки зрения использовать ли img или забить и делать картинки через бэкграунд

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

Алексей Струков: Какая разница для семантики div вы использовали или img для отображения картинки? Как вы напишите css все ровно.

[Алексей Струков]

Дима Турков: ниже в комментарии написал различия в css и html подходе

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

Алексей Струков: а то я их на примере не знаю!

[Алексей Струков]

Дима Турков: если знаете разницу, то о чем тогда разговор? Есть два подхода, но один из них мне кажется более удобным чем второй. Я хотел узнать у людей как они используют второй подход (html) и в каких случаях они его используют.