Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size

I used this to get the image to the center and to make it relative to the width of the parent.

#image {
    display: block;
      
    max-width: 100%;
    
    margin-left: auto;
    
    margin-right: auto;
    
}

You can also use width: 100%; to make the image bigger so it's in the center of the page, but that way you just fool the program, which is not fair.

I used this:

#image {
  width:100%;
  height:auto;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

Have you tried to call it from your div?

#img-div {
   text-align: center;
   display: block;
   filter: grayscale(100%);
   width: 100%;
}

#img-div img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

<div id=“img-div”>
 <img href=“something”/>
</div>

I added margin-left (auto), margin-right (auto) and display (block) to img element and it worked for me. Finally got the 10/10.

The whole code is then :

#img-div {
  text-align: center;
  display: block;
  filter: grayscale(100%);
  width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

Thank you for your suggestions.

the command

    image { 
   max-width: 100%; 
   height: auto;
}

is usually enough. but the way that codepin tests for the code is searching for both width and max-width

however, people were saying that you should specify max-width to 330. I simply didn't know how to acquire the information that this image has this width so I had to figure out another way. so here it is (and it passed the test):

  #img-div{
  background-color: white;
}

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

you can check it in my codepin project here: https://codepen.io/asserelfeki/pen/LYNOEVJ

I've been doing the same project.

#img-div {
    margin: auto;
    width: 97%;
    padding-bottom: 10px;
}

#image {
    max-width: 90%;
    display: block;
    margin: auto;
}

Why 90%? As for the challenge, we don't want the image to take the full width of the container. After adding these properties, no matter how much I resize my page, the image will not exceed the container, it will be responsive

This is what i did

 #img-div {
  text-align: center;
  display: block;
  filter: grayscale(100%);
  width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

#img-div {
  position: relative;
  height: 500px;
  width: 500px;
}
#image {
  position: absolute;
  max-width: 100%;
}

Please try this code for your reference

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

This is the Solution:

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

#img-div{  
  width: 50%; <!--depends on the image resolution and its appearance in the page-->
  background: white;
  margin: auto; <!--centering the image-->
  padding: 15px;
}

#image{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

This link contains what you should need: https://www.freecodecamp.org/forum/t/tribute-page-responsively-resize-img-relative-to-parent-element/203586

Code in case link doesn't help:

#image {
max-width: 250px; <!--Base width-->
width: 100%; <--Size according to parent use percentage-->
display: block;
margin: auto; <!-- center the image -->

}

try this i thing this is help ful for you....

@media (min-width:500px) {
  /*Class name*/ {
    /*properties*/
  }
}
@media (max-width:499px) {
  /*Class name*/ {
    /*properties*/
  }
}