@cloudz

Как использовать разные картинки для разных разрешений в html?

Всем привет, не могу разобраться.

В html есть картинка
<img src="img/tea-img.png" alt="tea" class="img-responsive tea-image"
                     srcset="/img/mob_tea-img.jpg 768w">


Как заставить подгружаться при разрешении ниже 768px в ширину, картинку в jpg, а если разрешение экрана больше, то подгружать картинку которая в png? picture не использую, поддержка не устраивает
  • Вопрос задан
  • 842 просмотра
Пригласить эксперта
Ответы на вопрос 1
r0n1x
@r0n1x
Помогу с html, css, js
let imgs = document.querySelectorAll('img');
    if (document.documentElement.clientWidth <= 768) {
      for (let img of[...imgs]) {
       img .src = document.querySelector('img').src.replace('jpg', 'png');
      }
    }

Но лучше адрес картинки брать из data и вставлять скриптом в src
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы