I’m new to the coding world. I’m learning by myself with this book:
So I got in the responsive images with <picture> chapter. After reading everything it seemed clear. So I continued with the exercise which asked me to replace 3 <img> tags from a previous page with the <picture> tag using 3 different files for each image that have respectively 400, 800 and 1200 pixels.
So the <img> tag looked like this:
<img src="Gallery/thumbnails/bread-200.jpg" alt="close-up of sliced rustic bread">
Following the exercise instructions I replaced it with this:
<picture> <source media="(min-width: 640px)" srcset="images/bread-800.jpg 800w, images/bread-1200.jpg 1200w" sizes="80vw"> <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread"> </picture>
I tried to see how the image changes with the Chrome developer tools but I can’t see the 800 pixel image.
Until 639 pixels of width I can see the 400 px file. For a width >640px I get the 1200px file.
I uploaded the page on github: https://david0495.github.io/gallery.html and tried also XRespond and the result was this:
At last I noticed one thing that got me more confused. If I try the page on Chrome resizing the windows I can see the 800 px file image.
What is going wrong? I’m getting really confused with these stuff. The exercise gives exactly the same code. I’m sure there is something wrong but I can’t find out what.
Would appreciate some help. Thank you!