Responsive image resizing

I can’t seem to get the image to resize. Must be something wrong with my code but as I’m new to coding I can’t figure out what. could anyone please help with this

show your code, please

<h1 id="title">THE JOKER</h1>
<h2>WHY IS HE SO SERIOUS ?</h2>
<style>
  img {
    width: 100%;
    height: auto;
    object-fit: contain;
    
    
  }
  
</style>
<main id= "main">
  <div id= "img-div">
    <div id= "img-caption">JokerFace</div>
    <img id= "image" src=https://cdn.domestika.org/c_fit,dpr_1.0,f_auto,t_base_params,w_820/v1588761497/content-items/004/465/679/DD5680CA-BE21-459E-8979-E76E1FB57765-original.jpeg?1588761497>
    <p id= "tribute-info">There are times when a certain character influences you so much that you totally sink yourself into that character. Of all the villains in the history, the Joker is, without a doubt, one of the most enduring and iconic characters.
But why, despite being a psychopathic, nihilistic murderer, is the character so popular — so loved, even? Why do we see that freakish red scar of a smile on so many t-shirts, posters, and memes? The Joker is a complicated character. His crimes are not fueled by the desire for money, ambition, or other ordinary motifs. The terror he spreads is ideological and his motivations are philosophical...If you are good at something, never do it for free. — The Joker, The Dark Knight.</p>
    <a target= "_blank" id= "tribute-link" href= https://medium.com/@adityavats/understanding-joker-a-psychological-view-90da73bfd557> Link to learn more about this strange being! </a>
   </div>
</main>  

all the rest works fine

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 it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

okay thank you
This is also the css attached:
\
h1 {
text-align: center;
color: green;
}

h2 {
text-align: center;
}

img {
width: 100%;
height: auto;
}
\\

i’ve deleeted the style element also and just used the css box on codepen

\\

THE JOKER

WHY IS HE SO SERIOUS ?

JokerFace

There are times when a certain character influences you so much that you totally sink yourself into that character. Of all the villains in the history, the Joker is, without a doubt, one of the most enduring and iconic characters. But why, despite being a psychopathic, nihilistic murderer, is the character so popular — so loved, even? Why do we see that freakish red scar of a smile on so many t-shirts, posters, and memes? The Joker is a complicated character. His crimes are not fueled by the desire for money, ambition, or other ordinary motifs. The terror he spreads is ideological and his motivations are philosophical...If you are good at something, never do it for free. — The Joker, The Dark Knight.

Link to learn more about this strange being!
\\\