Responsive Web Design (Retina Img)

HTML-CSS
1

Hello everyone,

I was trying to use percentage to shrink this img’s both width and height by half and it seems to affect width only. Could anybody tell me why it is not working as I intend?
Thanks in advance.

  **Your code so far**


<style>
img {
  height: 50%;
  width: 50%;
}

</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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Challenge: Use a Retina Image for Higher Resolution Displays

Link to the challenge:

2

By using percentage dimensions in style you are setting the width and height with respect to the size of parent container <body> in this case. So in your code the width and height of img becomes 50% of the display preview container in browser which can be observed by changing width of the preview window.

The challenge requires you to halve the size of img using px values, see hint of challenge.

2 Likes
3

You are right. The challenge requires me to halve the size of img using px values but I was just curious why percentage would not work.
Thank you for the explanation, uma1r!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.