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

**URL:** <https://forum.codewithmosh.com/t/html5-css3-part-2-lecture-10-resolution-switching-the-image-shows-not-as-i-thought/6698>\
**Category:** HTML/CSS\
**Created:** [August 10, 2021, 4:41am UTC](https://forum.codewithmosh.com/t/html5-css3-part-2-lecture-10-resolution-switching-the-image-shows-not-as-i-thought/6698 "2021-08-10T04:41:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hoang91](https://avatars.discourse-cdn.com/v4/letter/h/f1d935/32.png) [@hoang91](https://forum.codewithmosh.com/u/hoang91)\
**Post date:** [August 10, 2021, 4:41am UTC](https://forum.codewithmosh.com/t/html5-css3-part-2-lecture-10-resolution-switching-the-image-shows-not-as-i-thought/6698/1 "2021-08-10T04:41:35Z")

</div>

Good day everyone!  
I’m new to HTML5 & CSS3 series and I hope I don’t bother you.  
Here is my code:

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

---

<div class="post-metadata">

**Author:** ![eelsholz](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eelsholz](https://forum.codewithmosh.com/u/eelsholz)\
**Post date:** [August 11, 2021, 12:55am UTC](https://forum.codewithmosh.com/t/html5-css3-part-2-lecture-10-resolution-switching-the-image-shows-not-as-i-thought/6698/2 "2021-08-11T00:55:18Z")

</div>

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:

```auto
<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>

```