picture element not recognizing more than 2 source images (including image on img tag) on different-CodePudding

I'm having hard time figuring out why element not recognizing more than 2 img sources. On 2 images (including image on img tag) it works fine, gives different sized images on different breakpoints but if I add 1 more to that, it doesn't recognize 3rd image and keeps 2nd (image on 560px breakpoint) one on larger breakpoints. 3 hours in and I can't keep my head around it.

HTML

 <picture>
                <source type="image/png" srcset="/img/section1-img8.png" media="(min-width: 560px)" width="441px"
                    height="374px">

                <source type="image/png" srcset="/img/section1-img7.png" media="(min-width: 1024px)" width="702"
                    height="600">
                <img  src="/img/section1-img5.png" width="283" height="240">
 </picture>

I tried changing different image formats, reordering the images, reordering the breakpoints, still no luck.

CodePudding user response：

You should change the media attribute for image 1 to:

media="(min-width: 560px) and (max-width: 1023px)"

The larger image ist not shown because the condition min-width:560px is true for everything larger then 560px.

Alternatively you can simply change the order of the source-elements, starting with the larger (min-width: 1024px). The browser will go top down.