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

[torsar]

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

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

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

(css 3)

Один html-файл.

Edited February 21, 2021 by torsar

[Full-R]

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

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

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

[npofopr]

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

[Full-R]

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 версий. Так зачем же мы будем делать под разные разрешения?