Why is the wrong width of the image on the mobile device when using srcset?

Question

Images

Decided to test img srcset features for adaptive images for the first time.
HTML code:

<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;
  }
}

What is supposed to happen?
If the device is mobile, then the picture is displayed 2x, if not, then 1x. It works as it should, no problems.
On screens up to 1024px wide, the image occupies 100% of the container width, from 1024px its width is fixed at 800px.
If you use a regular src without srcset, then the width of the image adapts according to css
. But, when using srcset, the image in landscape orientation is not stretched by 100% for some reason, but in portrait orientation it is stretched as expected (LG G2 phone, 1080x1920).

PS: pages.png and pages-2x.png are the same, including the size (for the test, pages-2x.png just marked in red to distinguish)