I have doubt in the part, where if we look into the code it says that if the Viewport is less than 599px then 600px wide image of Panda should be loaded but when reduced (minimizing the browser) and if we see the results it is not as expected i.e it doesn’t match with the one which is given by MDN.
Hi @Tejas-Teju!
Responsive images is a tricky subject to get right. Your code looks like it should work, so I’m not sure why it doesn’t.
In our version (which does work), we do this:
<picture>
<source media="(max-width: 600px)" srcset="red-panda-portrait-small.jpg">
<img src="red-panda-landscape.jpg" alt="a red panda">
</picture>
So basically the default landscape image is loaded, unless the viewport is 600px wide or less, in which case the portrait version is loaded instead.
I have tried the above code too. The result is same as previous.
Try this!
hello @Tejas-Teju
hope that everything going fine with you
just a notice that codepen does not have access to your local file so the image will not be loaded
only the paid version of codepen allow that by creating project
or you can use github for free or uplaod the picture to any hosting site and use the link instead of local address
i do not know if that what you meant or not
hope that help and have a nice day