Tribute Page, responsively resize img relative to parent element

HTML-CSS
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

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

51 Likes
3

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

Thank you so much!

2 Likes
4

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

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

This should work

10 Likes
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.

9 Likes
9

It isn’t working.What shall I do then?:worried:

1 Like
10

hi @ShashankShekhar,

did you manage to solve the issue? if not, what have you tried and how did it turn out?

11

Worked perfectly fine por me, many thanks!

1 Like
12

Didn’t work for me. I wonder why

13

didnt work for me either :frowning:

14

You need to assign a max-width: 100% to your image and make sure its parent element has a set width too. For example the container could be 900px, if you set the image inside it to a max width of 100%, it is therefore responsive but cannot flow outside of its container.

5 Likes
15

great pretty trick… totally forgot it thanks man

16

use max-width: 100%; height: auto; display: block;

17

me too, thanks so much!

18

please can one help me out
an stock on The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

19

Hi,

I am having the same issue. I think this is the relevant code:

#img-div {
margin: 20px;
padding: 50px;
background: white;
}
#img {
max-width: 100%;
height: auto;
display: block;

I have tried all the tweaks in this thread without any luck. I’m not allowed to post a link to my codepen.

Thank you!

20

it did not work and am not understanding what i have to do