Build a Tribute Page {unable to resize the size of the image corresponding to the parent element}

1

I am new to HTML and CSS. Well I have been able to complete all the tasks except with the one where I don’t have any idea to resize the size of the image respectively to width of the parent element without exceeding the original size.

This is my source code for making tribute page.

https://codepen.io/yugahang_limbu/pen/yLOgOBV

1 Like
2

Hello
First you need to change your “#img” to “#image” as you set its id to that, then you set a width of 100% for it and max-width of your choice.
Then set a display to “#img-div”, for example flex, then flex-direction to column, and align-items to center.

#image{
  width: 100%;
  max-width: 900px;
  height: auto;
}
#img-div{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

With only those changes I was able to pass all tests in your code.
Hope this helps.

1 Like
3

Thanks man, life saver

1 Like