'<img> element should responsively resize, relative to the width of its parent element, without exceeding its original size

I started working on tribute page project on codepen passed 9 test cases. Tried all the ways but cannot pass the last test case.

My css code

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

#img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   height: auto;
   padding-top: 10px;
   max-width: 100%; 
}

Here is my project.

cssresponsive-design


Solution 1:[1]

Apart from the used CSS selectors which you should fix: To the given width in percent just add a max-width with a pixel value that equals the original width of the image.

Solution 2:[2]

The idea is to use the Bootstrap CSS Library from a previous freeCodeCamp lesson, which in this case requires you to add the link at the top of your HTML document:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

Once the Bootstrap link is there, you just add class="img-responsive" to your image element, the image resizes appropriately and passes the test.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes
Solution 2 Nathan Ruffing

Related Questions