Image swap css dpi

[lvnerender0394643253]

Hello! I was in this exercise web-development/tracks/getting-more-advanced-with-design/modules/learn-responsive-design-module/lessons/media-queries/exercises/dpi and I noticed here there is an image swap with a media query of a logo which is set as a background-image, but what would happen if I have only an image and I want to change that image for another screen resolution?

`HTML

       <img class="img-one" src="/SOURCE1" width="400" height="400"/>
     </div>`````
CSS

`````@media only screen and (min-resolution: 150dpi) {

}

It is not a background-image, so how could I do the swap here? Thank you!

[janneslohmeijer]

If I understand your question correctly,

You want to show an image based on screen resolution.

Well you can’t really change the dpi of an image based on the screen resolution. You can however have multiple images in your page folder and show the image that corresponds to the screen dpi. Is this what you are looking for?

[lvnerender0394643253]

Yes! Exactly. Do you know how to do that? Thank you!

[janneslohmeijer]

Well the easiest way is this:

Have all the images as elements in your html file. Give them id tags and then use your @media queries to display them, and hide the ones you don’t want to show. Like so:

@media only screen and (min-resolution: xxxdpi) {
    #image1 {
        display: block;
    }
    #image2 {
        display: none;
    }
    #image3 {
        display: none;
    }
}
@media only screen and (min-resolution: xxxdpi) {
    #image1 {
        display: none;
    }
    #image2 {
        display: block;
    }
    #image3 {
        display: none;
    }
}
@media only screen and (min-resolution: xxxdpi) {
    #image1 {
        display: none;
    }
    #image2 {
        display: none;
    }
    #image3 {
        display: block;
    }
}

Of course you need to adjust to code to your specs. If all image need to have the same styling just give them the same class.

Hope this will help!

Happy coding!

[lvnerender0394643253]

Oh my gosh thank you SO much! You are the best!

[janneslohmeijer]

I guess from your reaction that it worked?!