Need help passing the responsive image test in the Tribute Page

HTML-CSS
1

Tell us what’s happening:
Unable to pass the responsive image test on a tribute page. Looked up forums on FCC and also Stackoverflow.

Your code so far

/* #img-div{
  width: 800px;
} */

img{
  margin: 20px;
  width: 80%;
  height: 80%;
  max-width: 80% ;
  margin: auto;
/*   height: auto; */
/*   display: block; */
}
  • Tried it with and without setting specific size on the img-div.
  • Tried both fixed sizes and %
  • Tried it with and without the CSS that is commented out here

Codepen Link:

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36.

Link to the challenge:

2

Try this:

img{
  margin: 20px;
  width: 80%;
  height: auto;
  max-width: 80% ;
  position: relative;
  margin: auto;
  display: block;
}
1 Like
3

Thanks !! Thanks !! Thanks !! That works.

Can you help me understand why position: relative is needed ?

4

The 8th user story says

The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

That made me think of the relative position.
Also here is a great tutorial for making css images which uses this same technique for centering a div:

 .box{
     position: relative;
     margin: auto;
     display: block;
     //optional background or border
     background: white;
     border: solid 4px red;
     //add more code here
   }

Position relative means the element is positioned relative to its normal position, which would be the very top left corner as it is the first div in the body.
When the position is set to relative, using display: block; and margin:auto; will automatically center the box horizontally.

From: A beginner’s guide to pure css images

5

Thanks for that explanation !

6

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

1 Like