Making Retina Images span a whole screen

HTML-CSS
1

Tell us what’s happening:
After dealing with creating images that scale over a whole page by setting its width: 100px; and height: auto; now are introduced to setting and using retina images by declaring their width and height as half of their original values, question now is how do you make images that cover over the whole page without jeopardising their quality?

Your code so far


<style>
img {
  width: 100px;
  height: 100px;
}
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Use a Retina Image for Higher Resolution Displays

Link to the challenge:

2

I think the answer here is to choose an original high density image that is twice the size as the full screen that you want to cover, but in the css use half of those values.

Moderators, please correct me if I am wrong.

1 Like