How to resize a large image in CSS?

I have reached the “do your own offline project” in the CSS and HTML sections and I’m running into an issue. My notes seem to not have this in them.

I downloaded an image to make my site and when I insert it in it is very large. Upon trying to set the width, nothing seemed to happen so I put a border around it and it looks like the box is indeed shrinking but the image remains the same size and goes beyond the boundary. How do I resize a large image?

Imgur

body>
p>Am an snek, see me slether


figure ID=“noodle”>
img src=“resources/snek.png”>
figcaption>A yellow danger noodle slytherin away
/figure>
/body>
(Removed the opening brackets because somehow CODECADEMY didn’t realize maybe people need to paste their HTML code on here)

CSS
#noodle {
width: 50px;
height: auto;
border: 5px solid green;
}

p {
font-family: sans-serif;
font-size: 100px;
border: 5px solid red;
text-transform: uppercase;
}

Hi there,

This seems slightly passive-aggressive, but I assure you that a coding website has the option to display code.
image

Please check out the Welcome post to see other features you may not know about.

You can do this by simply applying width and/or height directly to the image.

img {
  width: ;
  height: ;
}