Разные картинки для десктоп и для мобайл

[torsar 0]

Для десктопа и для мобайл есть разные версии картинок с разным разрешением.

Нужно сделать адаптив.

Как мне менять картинки для тега img при изменении разрешения экрана?

(css 3)

Один html-файл.

Изменено 21 февраля пользователем torsar

[Full-R 6]

Билять... Как утомило это говно головного мозга под названием media-queries. Уже просто потряхивать начинает.

Просто берите максимальное разрешение, а размеры указывайте во view port единицах.

Никому ведь больше не нужны сраные извраты с лестницами.

[npofopr 426]

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

[Full-R 6]

31 минуту назад, npofopr сказал:

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Ну и кому это нужно? Вот так работать становится неоправданно дорого что по времени что по затратам на ПО. На это есть тысяча и одна причина. У нас один кэш и ни кому не нужно 300 версий. Так зачем же мы будем делать под разные разрешения?