Build a Tribute Page #User story 8


HOW DO I MAKE MY IMAGE RESPONSIVE?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property

You need to use the max-width property on your img tag in your CSS and then set your width to 100%. Then it will resize but never get bigger than the max-width

1 Like

Still the same…no changes yet

img {
  max-width: 100%;
}

I see this in your code and this is incorrect. Max-width needs to be set to px width…

After that you’ll need to set your img tag to display:block, and move your margin from img-div to the img itself.

Your code is incomplete.
The test gives you some hints as to the missing code
also the margin to center the image is applied to the wrong element.

bellow is a spoiler with the solution

img {
  display: block;
  max-width: 100%;
 height: auto;
  margin: 0 auto;
}
1 Like

max-width: 100%;
or
width: 100%;
max-width 100 makes the image never become larger than it’s original size (so you don’t have a 240p image displaying like a 720p image) and width 100 makes it span across the screen (good for large displays.)
My suggestion would be something like this:

#img {
  max-width: 100%;
}
@media screen and (max-width: 1080px)  {
  #img {
    width: 100%; 
  }
}
1 Like

Thanks for your help, It worked.