Not able to resize image at while creating my tribute page

1

Hi all,

Thank you for going through this,

I am not able to resize the image which I put in the tribute page,

I have tried with both inline style and CSS but it just dont resize any comments/help

Code with CSS -

<style>
#img {
  width: 500px;
  length: 500px;
  }
</style>

<body>
 <div>
 <h1 align="center"> Kandarp Deep Shukla</h1>
</div>
 <div><h2 align="center"> "Herbinger of a million dreams"</h2>
</div>
 <div class="img"><img align="center" width:10% length:10% src="https://iso.500px.com/wp-content/forum/uploads/2014/07/20484.jpg"/>
</div> 
</body>

Code with Inline style -

<body>
 <div>
 <h1 align="center"> Kandarp Deep Shukla</h1>
</div>
 <div><h2 align="center"> "Herbinger of a million dreams"</h2>
</div>
 <div style="width: 1000px; height: 600px;"> image tag with width and length of 10%
</div> 
</body>

********** the editor is not allowing me to put img tag in 2nd example hence I have tried to explain.

Thank you for going through this -
Kandarp

2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

It’s helpful for others if you have a link to that page’s codepen.

3

Haiiiyo.

When posting code examples, you can use triple backticks before and after your code to format it, for example:

```
    

        
    

```

P. S. Waaaah, @kevcomedia beats me to it. d:

There are multiple issues with your code, here are some:

  • You are not referring to the img class correctly in your styles. #img refers to the img ID, not the img class. It should be .img {/* insert styles */}
  • You didn’t apply the img class to the image—you applied to the <div> that contains it
  • I don’t think you can specify length (height?) and width with width: 10% length: 10%—your browser is probably just ignoring them because they don’t make any sense
  • There are two src='s inside your img tag (possibly not in your original code)
  • Again, in your second example you are setting the styles to the <div> that contains the image and not the img element itself

It’s worth noting that these are all covered in Free Code Camp HTML5 and CSS challenges (example)—you may want to review them and be comfortable with the ideas before moving onto more complex projects.

Good luck!

<style>
#img {
  width: 500px;
  length: 500px;
  }
</style>

<body>
 <div>
 <h1 align="center"> Kandarp Deep Shukla</h1>
</div>
 <div><h2 align="center"> "Herbinger of a million dreams"</h2>
</div>
 <div class="img"><img align="center" width:10% length:10% src=src="https://iso.500px.com/wp-content/forum/uploads/2014/07/20484.jpg"/>
</div> 
</body>
1 Like
4

@KandarpDeep

You may want to check the code above too… several things wrong here.

5

Hi kevcomedia,

Thank you so much,
Really I didnt expected the swift response, I will make sure to follow both of the rules while posting next time.

Thank You
Kandarp

6

Hi @owel,

Thank you for checking this out,

That was by mistake, I have corrected it.

Thanks again
Kandarp

7

Thank you, so much for your detailed expression, this worked, with inline.

I am still having some issues with alignment and while using the sizing in CSS, I will try to research and try to find out the problem.

Thanks again.

-Kandarp