Passing test while image not resizing

[matiasmtl]

Issue Description

I completed my Tribute Page project and I'm getting a 10/10 pass on the test. However, the image is not resizing when the display changes.
I tried following the code used in the example (https://codepen.io/freeCodeCamp/full/zNqgVx), with the text-align in the "html,body" and the resize in the img but then my image will be aligned to the left and I won't pass the test.

Browser Information

• Browser Name, Version: Latest Chrome
• Operating System: Windows 7 and Latest Chrome on latest iOS
• Mobile, Desktop, or Tablet: Mobile, Desktop

Your Code / Link to Your Pen

https://codepen.io/matiasmtl/full/ajEaOO/

CSS:

#main {
  text-align: center;  
  }
#title {
  color: brown;
  background-color: grey;
  font-size:60px;
  font-family: monospace;
}
#img-div {
  
}
#image {
  max-width: 100%;
  height: auto;
  display: block;
}

[...] 
 HTML:
<div id="main">
  <h1 id="title">El Gaucho Martín Fierro</h1>
  <div id="img-div">
    <div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Vuelta_martin_fierro_1897.JPG"></div>
    <p id="img-caption">An early edition of Martín Fierro, published in 1894</p>
  </div>

[...]

JS:

// coded by @ChaituVR
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page'); 

Screenshot

[matiasmtl]

Hi @tbushman Thanks for looking into this.

Try adding max-width: 100%; to the element.

Here the image becomes responsive (it resizes when I change the display) and it's centered but I'm not passing the test. I get 9/10, the issue being "The element should responsively resize, relative to the width of its parent element, without exceeding its original size."

If that doesn't work, remove the div id="image" wrapper and apply id="image" to img

If I do that, the image gets aligned to the left and I get 9/10 in the test ("The element should be centered within its parent element."). I tried both options, adding the parameters in and in #main within the img tag but I gget the same result. My text-align: center; is in #main.

I look forward to any suggestion. Thanks!

[matiasmtl]

Thanks, @tbushman. I am passing the test now but the image is resizing beyond its max-width, which is against user-story #8 (The img element should responsively resize, relative to the width of its parent element, without exceeding its original size).

[matiasmtl]

Hi @tbushman Thanks for following up. I couldn't find a way to make this work. The image is resizing and I'm passing the test but is still exceeding the original size.
Any suggestion will be welcomed. The pen is here.

[ValeraS]

@matiasmtl remove width: 100% from img rule.

[matiasmtl]

That solved the issue of the image resizing over the original size but the problem then was that it was aligning to the left. I google that and solved it by adding

display: block; margin-left: auto; margin-right: auto;

Now I'm getting 10/10 and the image is centered, resizing but not exceeding the original size.

Thank you for your help!

[oujlassi]

this configuration work for me :
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
width: 95%;
}
#image{
display: block;
border-radius: .5em ;
width: 100%;
height: auto ;
box-shadow: 2px 2px #eaecf0;
max-width: 100%;
position: relative;
}
#img-div {
text-align: center;
top: 10px;
width: 100%;
height: auto;
position: relative;
}

[Rjoyadet]

Thank you! it worked.