Tribute page: i cant find my error in responsive image

#1

Hi, while checking my tribute page web design project, the program says that “The element should responsively resize, relative to the width of its parent element, without exceeding its original size.”

In the html, my tag is:
<img src="./borlaug.jpg" id="image" alt="Dr Borlaug teaching Mexican biologists in a wheat field" >

and in the css:
img {
max-width: 100%;
height: auto;
}

When i check the page, the image does resize, so the page seems to work. I can’t spot my error.

#2

Welcome to FCC @wayanK.
Do you have a link to the project? Is the image enclosed in its own container?

#3

How big is the original image? Maybe the parent element is bigger than the original picture; if that’s the case I suppose using a bigger picture would fix your problem. But I’m unsure of that, can you share your webpage?

#4

Thanks for your prompt reply! I’m new to FCC and CodePen, and I’m still struggling with the technologies. I think this link will work (https://codepen.io/wayanK/pen/ZEbLzwZ),

#5

Take note, an image is an inline element. For the test to pass apply display: block property to the image

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

I have also noticed you have applied the same property to the image twice. Always stick to DRY (Don’t Repeat Yourself ) principle.

#6

I know this is right, but I don’t understand it. @nibble Why wouldn’t it resize if you left in an inline element?

#7

@bradhanks It is just part of the test requirements. It does not have to do with the responsiveness of the image but with the default behaviour of image elements.

Always setting images to display: block is a very good habit to get into. By default, images behave like inline-block elements (technically an image is a replaced element) which means you will get white space at the bottom of the image.

Example
https://codepen.io/lasjorg/pen/VwvPmWL

1 Like
#8

@lasjorg Ok got it. I understand it is best practice. I didn’t think there was a technical reason it wouldn’t work without it which seems to be the case.

#9

I think it was just decided that the display: block requirement fit well enough with the other requirements for the image, even if it is not strictly speaking related to the responsiveness of the image.

It does make the test message a little more confusing, especially if you do not read the second line in the error message.

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

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

Really it doesn’t matter if the image is responsive or not, it should be set to display: block to avoid the white space issue.

#10

Thanks for your help, guys!

#11

This is very useful.
Thank you.

#12