HTML5 & CSS3 Part 2 | Lecture 10: Resolution Switching | The image shows not as I thought

HTML/CSS
1

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!!!

2

I can’t get it to work either! No matter what I try it it doesn’t do what I expect. But I can get it to work using the picture tag, for example:

<picture>
  <source media="(max-width: 923px)" srcset="images/320.jpg">
  <source media="(max-width: 1387px)" srcset="images/924.jpg">
  <source media="(max-width: 1439px)" srcset="images/1388.jpg">
  <source media="(min-width: 1440px)" srcset="images/1440.jpg">
  <img src="images/320.jpg" alt="an image">
</picture>
1 Like