Build a Tribute Page #User story 8

HTML-CSS
1


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/

2

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

3

Still the same…no changes yet

4 
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.

5

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

image
image849Ă—819 186 KB

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

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%; 
  }
}
7

Thanks for your help, It worked.