freeCodeCamp Challenge Guide: Make an Image Responsive

Make an Image Responsive


Solution 1 (Click to Show/Hide)

Following the instructions:

Add style rules for the img tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio.

the style becomes:

.responsive-img {
  max-width: 100%;
  display: block;
  height: auto;

img {
  width: 600px;

<img class="responsive-img" src="" alt="freeCodeCamp stickers set">
<img src="" alt="freeCodeCamp stickers set">
1 Like