Почему получается неправильная ширина картинки на моб.девайсе при использовании srcset?

Question

[Алексей]

Решил затестить впервые возможности img srcset для адаптивных картинок.

Код HTML:

<img src="img/pages.png"
srcset="img/pages-2x.png 2x, 
img/pages.png 1x" 
alt="Images" class="section-two-img l-center"/>

SCSS:

.section-two-img {
	width: 100%;
	max-width: 100%;
	media only screen and (min-width: 1024px) {
		max-width: 800px;
	}
}

Что по задумке должно происходить?
Если устройство мобильное то отображается картинка 2х, если нет то 1х. Это работает как надо, проблем нет.
На экранах шириной до 1024px картинка занимает 100% ширины контейнера, от 1024px — ее ширина фиксируется на 800px.
Если использовать обычный src без srcset, то ширина картинки адаптируется согласно css
Но, при использовании srcset картинка в ландшафтной ориентации не растягивается на 100% почему-то, а в портретной растягивается, как и положено (телефон LG G2, 1080x1920).



P.S.: pages.png и pages-2x.png одинаковые, в том числе и по размеру (для теста, pages-2x.png просто пометил красным чтобы отличить)

Comments

[Николай Егоров]

Сорри ответить не могу, но интересует следующее: как хорошо поддерживается атрибут srcset, и какие есть альтернативы?