Failed test image element resize no longer than it's original size

HTML-CSS
#1

The ; element should responsively resize, relative to the width of its parent element, without exceeding its original size.
How do i test the tribute page?

Your code so far
css
#img-div{
width: 100%;
height: auto;
text-align: center;

}
#image{
text-align: center;
width:100%;
}

html

shutterstock-774596644 Minister and Civil Rights Leader

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

#2
#3

Key point “relative to the width of its parent element, without exceeding its original size”

width: 100%;
height: auto

only accomplishes one of these…that it will be relative to the width of its parent. but if the parent is larger than the size of the image, then the image will scale up to be larger than its original size so that its 100% the width of its parent.

Check this out for an explanation of what to do and why:
https://www.w3schools.com/css/css_rwd_images.asp

2 Likes
#4

Thank you.

I added max-width: 100%; it still doesn’t work. Maybe take a look at my code. i’d appreciate it and give you a like and solution found.

#5

Did you change your code to put the max-width and height: auto on the img-div, or on the image itself?

Think of which one those styles need to be on to manipulate the image to be responsive.

#6

Hi candice,

I read your blog, wow you are doing it. Keep up the good work. You’re amazing.

#7

So, it passed on my phone, but not on my lap top.

#8

On the image itself.

I had tried max-width: 370px, but that didn’t work, but for some reason it works when I make margin: auto, display:block; and max-width 370px.

With your solution is was passing on my phone but not on my laptop.

Maybe it’s an issues with codepen.

Thanks though for your comment,

I enjoyed reading your article.

#9

Post a link to your codepen and I’ll check it out :slight_smile:

Btw, you dont want to put a hard-coded size into your max-width for the image. For it to be responsive, it needs max-width: 100%, which means the max-width that image will ever be is 100% of the width of its container.

#10

I’ll post a link tomorrow. I work late tonight.

Also, I haven’t tried the max-width 100% with auto height and margin auto. That might make a difference when testing. It did with max-with 360 and inline block.

#11

https://codepen.io/helen-nelson/pen/QJqMYp text over lapping was corrected when I took out padding.

#12

I just checked and yup, if you just change the image to max-width: 100%; then it becomes responsive and your tests pass. Right now you have it on img-div, not on the image itself (which is img) You want the image to be responsive, so you need to put the responsive styles directly on it, not on the div containing it.

Side note: max:-width: 360px doesnt do anything because the image is 300px…its not going to ever be required to be limited to a size of 360px because its actual size is smaller. But, with responsive design, its not a good idea to hard code the image size like that because then it wont be variable to the size of its container. Its better to use percentages.

Also, you don’t need the width: 100%; height:auto; that is currently on img-div because the natural behavior of a div is to take up the entire width of a page, and expand 100% to the height of the contents within it.

Hope that helps and also helps explain what is going on there!

3 Likes
#13