weranda
@weranda

Можно ли заменить изображение при определенной ширине окна браузера?

Приветствую

Есть изображение:
<img src="../logo-big.png">
При ширине окна браузера в 960px хотелось бы его заменить на:
<img src="../logo-middle.png">
А при ширине окна браузера в 400px на:
<img src="../logo-mini.png">
Возможно ли это сделать прямо в HTML без медиа-запросов в CSS через background-image или JavaScript? Краем уха слышал про набор адаптивных изображений через srcset, но из-за ненадобности даже не вникал в это, но помнится, что там дело замешано на чем-то ином, нежели на ширине окна браузера.

P.S.
Или же, если не прибегать к JS, то путь в этом случае один — CSS и background-image?
  • Вопрос задан
  • 192 просмотра
Решения вопроса 1
webinar
@webinar Куратор тега Веб-разработка
Учим yii: https://youtu.be/-WRMlGHLgRg
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

https://caniuse.com/#search=picture
но если не поддерживается, отработает все равно, просто без зависимости от min-width
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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