Use a retina image image for higher resolution display

HTML-CSS
1

Tell us what’s happening:
hey there
here in this code i actually want to know how to know the orginal height and width of the image

Your code so far


<style>
img {height: 100px; width: 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.61.

Challenge: Use a Retina Image for Higher Resolution Displays

Link to the challenge:

2

Hi!

To know the original height & width, We check properties of image.

In the code shared, you set image height to 100px and its width to 100px.

3

Thanks! for replying
can u please tell me to how to check properties of Image?

4

Right-click on the image and then select “Properties.” A window will appear with the image’s details. Go to the “Details” tab to see the image’s dimensions and resolution .

imageProperties
imageProperties544×779 79.3 KB

Another simple way is just to place the cursor at the file. Like below:

image1