Tribute Page, responsively resize img relative to parent element

Tribute Page, responsively resize img relative to parent element
0

#1

Tried lots of things on this and cannot get the last test to pass :weary: My image on the tribute page is nice and responsive as far as I’m aware but I keep getting the error:

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

Below that line it suggests "_ Use the “display” style property with a value of “block” forresponsive images.: expected ‘inline’ to equal ‘block’_

When I apply display: block to #img-div nothing happens? If I apply it to #image then I lose my nice and centred layout and still get the error!

The original images width is 625px so I’ve specified max-width: 625px;

anyone have any ideas???

here’s what I have so far;
https://codepen.io/CodeBarron/pen/vrajVa?editors=1100

Many thanks


#2

here you go. Just use this code instead:

#image {
width: 100%;
height: auto;
max-width: 625px;
margin-left: auto;
margin-right: auto;
display: block;
}


#3

Ah hbar1st your a life saver! I forgot about the margin-left: auto; and margin right: auto; trick!

Thank you so much!


#4

does not work for me. my image is 600px and i just substituted the values. nothing changed


#5
#image {
display: block;
max-width: 100%;
height: auto;
}

This should work


#6



it did. thanks


#7

what was the problem please?


#8

https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-an-image-responsive

Thais challenge explains it. Percentage scales the image to fit the width of its container.