@MyQuestion
Начинающий Frontend

Как размечать и стилизовать тег picture?

Добрый день!

Вопрос конечно странный, но я понял, что немного не понимаю, как это работает...
Допустим у меня есть множество условий под разные ситуации, в теге picture:
<picture>
          <source type="image/webp" media="(min-width: 1200px)" srcset="img/index-desk@1x.webp, img/index-desk@2x.webp 2x">
          <source type="image/webp" media="(min-width: 860px)" srcset="img/index-tablet@1x.webp, img/index-tablet@2x.webp 2x">
          <source type="image/webp" srcset="img/index-mobile@1x.webp, img/index-mobile@2x.webp 2x">
          <source media="(min-width: 1200px)" srcset="img/index-desk@1x.png, img/index-desk@2x.png 2x">
          <source media="(min-width: 860px)" srcset="img/index-tablet@1x.jpg, img/index-tablet@2x.jpg 2x">
          <img class="section__image" src="img/index-mobile@1x.png" srcset="img/index-mobile@2x.png 2x" alt="Фото">
        </picture>


И по старинке, я пишу для img класс, к нему обращаюсь через css и всё работает, отлично! Но почему всё работает? Ведь в разных состояниях, должны были загружаться заранее подготовленные изображения... Получается, заданный класс на img может влиять на все остальные подгружаемые source? Или это как-то должно отдельно контролироваться?
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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