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

Question

[MyQuestion]

Добрый день!

Вопрос конечно странный, но я понял, что немного не понимаю, как это работает...
Допустим у меня есть множество условий под разные ситуации, в теге picture:

<picture>
          <source type="image/webp" media="(min-width: 1200px)" srcset="img/[e-mail], img/[e-mail] 2x">
          <source type="image/webp" media="(min-width: 860px)" srcset="img/[e-mail], img/[e-mail] 2x">
          <source type="image/webp" srcset="img/[e-mail], img/[e-mail] 2x">
          <source media="(min-width: 1200px)" srcset="img/[e-mail], img/[e-mail] 2x">
          <source media="(min-width: 860px)" srcset="img/[e-mail], img/[e-mail] 2x">
          <img class="section__image" src="img/[e-mail]" srcset="img/[e-mail] 2x" alt="Фото">
        </picture>

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

Comments

[Ankhena]

Получается, заданный класс на img может влиять на все остальные подгружаемые source?

Да, именно так.
Вы стилизуете img.
Но тег img при разных условиях показывает разные картинки, получая нужный путь из source.
Вот и всё.

[MyQuestion]

Ankhena,
Как всегда, спасибо! ))