Use a Retina Image for Higher Resolution Displays

HTML-CSS
1

Tell us what’s happening:
I am running the test and if I inspect the image it is 100px x 100px but it will not pass the test:

// running test
Your img tag should have a width of 100 pixels.
Your img tag should have a height of 100 pixels.
// tests completed

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'">

Any help will be appreciated.
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays

2

you should also write height property :grinning:

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

This is a practice and case-study to learn CSS rules, but for images, try to set either width or height as auto, and just set value for another one. This will keep the image aspect

4

I made a mistake in my forum message. I tried two methods:

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

<style>
      transform: scale(0.5);
</style>

neither of these are passing the test.

5

but here,:heart_eyes:

<style>
     img{ transform: scale(0.5);}
</style>