Tribute page image max size question

[favnum]

I’m working on my tribute page, and I thought I was done but there’s one test I for some reason can’t get the program to accept. It says " 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size."

It does do this; I have my max width of my image-div set at 900px and the whole time the size changes, the image is set to 100% the width of the div. I tried it with height: auto, and with height: 100%, and neither of those do anything either. I’ve used media queries, tried to set a max width on the image itself, made the width of both the image and the image-div max 400, 300, 50 px, nothing.

I have a link to my full code below, but in case it helps I’ll put my image-specific css and html in here too.

https://codepen.io/david-kallgren/pen/yLMYdGV

 <div class="center-column">
   <figure id="img-div">
      <img src="https://static.highsnobiety.com/thumbor/BKxg7y-hOlFgQJfEsziUE8bRBVQ=/1600x1067/static.highsnobiety.com/wp-content/uploads/2020/08/29104520/chadwick-boseman-dead-01.jpg" alt="Boseman greeting fans" id="image">
      <figcaption class="text" id="img-caption"><i>Boseman gives us a wave goodbye</i></figcaption>
    </figure>
</div>
<style>
#img-div {
  width: 70%;
  max-width: 900px;
}

#image {
  width: 100%;
  margin-bottom: 10px;
}

.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>

[parvathy0]

Hi!

I looked at the error displayed on your codepen… It says “AssertionError: Use the “display” style property with a value of “block” for responsive images.”… The default is apparently in-line block…
So… Add display: block; under #image

The same test will refuse to pass once more still with “Try using the “max-width” style property” but that is because the unit test checks to see whether the image specifically resizes with change in screen layout - it’s a limitation in test design, not your code being faulty …
Add max-width to your image too and you’re done!

Hope that was helpful!

Also, cool person to pay tribute to! Happy coding!