Задать вопрос
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?
  • Вопрос задан
  • 281 просмотр
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы