Как разместить фотографию на весь эркан в зависимости от ориентации экрана?

Question

[Ewexon]

Нужно сделать что-бы на разных экранах менялась фотография, например:

Для landscape
<img class="bg" src="1920-1080.png"></img>

Для portrait
<img class="bg" src="1080-1920.png"></img>

Вот css

body, html {
  height: 100%;
  margin: 0;
  overflow-y: hidden;
}

.bg {
  height: 100%; 
  size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 1

[Alex]

Думаю вот так должно работать

<picture>
 <source srcset="1080-1920.png" media="(orientation: portrait)">
 <img src="1920-1080.png" alt="MDN">
</picture>

Comments

[Ewexon]

Ставит две фотографии если на телефоне смотреть

[Ewexon]

А нет, извиняюсь у меня руки кривые и там была лишняя фотография. Сейчас всё отлично