Build a Tribute Page2

Build a Tribute Page2
0

#1

Tell us what’s happening:
The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

this above condition, how to apply ? and thanks in advance.

my tribute page link is below.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page


#2

Hi,

A few things I see…

The tag should be img (and I think the inline height and width should be in your css - tag attributes is a very outdated way to style)

<image id="image" src="https://cdn.britannica.com/700x450/17/101217-004-5FDD4036.jpg" alt="" width="250" height="200">
<!--vs-->
<img id="image" src="https://cdn.britannica.com/700x450/17/101217-004-5FDD4036.jpg" alt="" >

I don’t believe that this center class is doing what you think it is. I removed it to get centering to work.

<div id="img-div" class="center">

Again, the image tag - should be using img

image { /*should be img*/
  max-width: 100%;
  display: block;
  height: auto;
}

margin:auto should center your picture nicely

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

All right! That should get you passing all tests. Good luck.