Как вывести на страницу картинку в зависимости от ширины экрана?

Question

[Barslk]

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

<picture>
    <source srcset="/img/header/1.webp" media="(min-width: 766px)">
    <source srcset="/img/header/2.webp" media="(max-width: 766px)">
    <img src="/img/header/1.jpg" alt="">
</picture>

Возможно ли это сделать в HTML без js?

Comments

[Одиночка Айс]

А картинки прям сильно отличаются?

[Barslk]

Ну да, зачем я тогда создал вопрос)

Answer 1

[Одиночка Айс]

Самое простое - добавить еще одну jpg картинку, задать обоим img по классу и разруливать на css.

<picture>
    <source srcset="/img/header/1.webp" media="(min-width: 766px)">
    <source srcset="/img/header/2.webp" media="(max-width: 766px)">
    <img src="/img/header/1.jpg" class="desktop" alt="">
    <img src="/img/header/2.jpg" class="mobile" alt="">
</picture>

.mobile{ display:none; }

@media all and (max-width:766px){
   .mobile{ display:block; }
   .desktop{ display:none; }
}

Comments

[Barslk]

Спасибо!

Answer 2

[Всеволод html]

Можно сделать через position, вместо absolute если не походит, поставь своё.
CSS:
img { position: absolute; left: 0; right: 0; }

Comments

[Одиночка Айс]

Что за бред?

[Всеволод html]

Одиночка Айс, не бред, а решение, сомневаешься в работе? Попробуй.

[Barslk]

Всеволод html, Не понял, как это должно работать. Знаю, что через media i backgraund можно, но меня интересует, возможно ли это сделать через HTML

[Всеволод html]

Barslk, только css или js, ну или задавать всем ширину 100%