CSS @媒体问题

Question

I'm trying to use the @media thingy in CSS and I ran into some problems.

Here is my CSS code (I have a massive screen):

#headerImage {
  width: 1000px;
  height: 1000px;
}

The 1000px header image is just right for me on my big screen. But since I'm making a website for a company, I have to consider about the viewer's screen size, so I researched on W3Schools and found out about the @media thing.

So then, I put the @media thing into my CSS. Here's the @media:

@media only screen and (max-height: 700px) {
  #headerImage {
    width: 500px;
    height: 500px;
  }
}

Good. I went back to the website, and reloaded it. 1000px . Good.
Now, I resized the height of the browser to something less than 700px . (I made the height small so it's definitely < 700px ) No. It's still 1000px .

Is there anything wrong?

Edit:

NOTE: I am using Chrome Version 96.0.4664.110 (Official Build) (x86_64)

Here's a bit of my HTML:

<img id="headerImage" src="logo.png">

And also, do you need <meta> ? I have it here:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

try this once you can try in mobile too height:100vh is you want full screen image

#headerImage {
    width: 100%;
    height:100vh;
  }
@media only screen and (max-height: 700px) {
  #headerImage {
    width: 100%;
    height: auto;
  }
}