Good day everyone!
I’m new to HTML5 & CSS3 series and I hope I don’t bother you.
Here is my code:
<img class="background" src="images/Hubble_zjicbl_c_scale_320.jpg" alt="" srcset=" images/Hubble_zjicbl_c_scale_320.jpg 320w, images/Hubble_zjicbl_c_scale_924.jpg 924w, images/Hubble_zjicbl_c_scale_1388.jpg 1388w, images/Hubble_zjicbl_c_scale_1440.jpg 1440w " />
I think when the device resolution from 320px to 924px, the browser will download the image with scale 320w and so on. But when I tested on Toggle Device Toolbar, the image with scale 320w always be download at width < 271px and the image with scale 924px always be download from 272px to 567px. The image with scale 1388w appear at 568px and 1440w appear at 707px.
I also set the class background width at 100vw. I don’t understand why the image scale doesn’t show as I think. Is there anything wrong or am I misunderstand something?
If I misunderstand something, pls explain it to me.
Thank you very much!!!