Responsively resize the img element

HTML-CSS
1

Tell us what’s happening:

The follow test is the only one that won’t pass:
User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Your code so far
This is my CSS code:

<styles>
img {
  max-width: 100%;
  display: block;
  height: auto;
}
body {
  background-color: #a3d5d3;
}
tribute-info {
  justify-content: center;
}
</styles>

Also my sub heading didn’t center, although that may not be necessary for this challenge.
Your browser information:

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

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

1 Like
2

Corr: The following test…

3

You can checkout my tribute page for image responsive on resize - https://codepen.io/kiran_user/full/gXdMjo/

4

If you could provide the codepen, it might be easy to suggest a solution

5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

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
6

The only part of my code that has produced any viewable results is text and background color. These produce no results. Why not?

<img id="image">
        <a id="tribute-link" target="_blank" href="http://www.fanpop.com/clubs/michael-jackson/images/30902623/title/beautiful-mj-photo"> 
        </a>
        </img>

<styles>
img {
  max-width: 100%;
  display: block;
  height: auto;
}
h1 {
  position: center;
}
tribute-info {
  justify-content: center;
}
</styles>
7

It’s style not styles.

2 Likes
8

Nothing I do passes User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

9

Ok, two problems here.

Firstly, your code is incorrect. To load an image into an img element you have to use the src attribute.
<img src=""> Also if you want to the image to link somewhere, the a tags should be wrapped around the image

<a>
  <img>
</a>

Secondly, the image src path you’re trying to use is linking to a web page rather than an image. If you want the path to the actual image instead, try right clicking on the image and selecting ‘copy image address’ (or copy image location on Firefox).

Hope that helps a little

2 Likes
10

This very was helpful. Thank you.

Also, do I have the coding correct for responsively resizing the img element (#8)?

image {
  max-width: 100%;
  display: block;
  height: auto;
}
11

Can I get any feedback at all regarding my coding for #8?

12

Is there way to contact freecodecamp directly by phone?

13

Can I get some help please

14

Your challenge is Responsive Web Design Projects - Build a Tribute Page
1- save the image in the challenge of Dr Norman Borlaug https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg
2- click right Properties
3- click Details
4- now you can see your image dimensions (1024 x 623)
5- copy your width 1024px
6- go to Css , to your id image{} and write this max-width: 1024px;
your code should be like this:
#image{
max-width: 1024px;
}

100% working :v::heart:

15

Or just copy this code :

#image{

max-width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;

}

100% working :v::heart:

1 Like