title: Responsively resize an image using CSS3, relative to the width of its parent element, without exceeding its original size
body: <p>I started building a Tribute page on CodePen.io, followed the user stories and got 9 out of 10 of the tests. I've been stuck on resizing the image using CSS3. I googled, tried the answers but none worked for me.
  The CSS code is :</p>
  
  <pre><code>#img-div {
     text-align: center;
     display: block;
     filter: grayscale(100%);
     width: 100%;
  }
  
  img {
    padding-top: 10px;
    height: auto;
    max-width: 330px;
  }
  </code></pre>
  
  <p>Here is the link to the CodePen page <a href="https://codepen.io/dansia/pen/NWxNMJP" rel="nofollow noreferrer">https://codepen.io/dansia/pen/NWxNMJP</a> look at it and help me solve this challenge. </p>