Relatively sizing an image

HTML-CSS
1

Tell us what’s happening:
I am having trouble with step number 8 ( The element should responsively resize, relative to the width of its parent element, without exceeding its original size.) I’ve tried using max-width, width in px, em and rems and nothing is working. can anyone help or point me in the right direction.

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 11021.56.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.76 Safari/537.36.

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

2

can you share your demo via codepen?

3

hi @emmanuel-h22,

sharing your codepen will help us all see what is going with your code,
but in any case, you are on the right track with the max-width property.

I believe a solution to this step of the test would be to use a percentage rather than pixels,
because the size of the parent container might change.

spoilers 
#image {
    display: block;
    max-width: 100%;
}
4

use %, 100% is the total width of the parent side to side, 50% is half. So when the size of the parent change the size of the children resize proportionaly