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