Img doesn't resize with browser

Question

So I have a resizing problem with my img. It just stays the same size. If you notice the error please tell. Thank You.

Here is a link to the code so you can try your suggestions or whatever: https://jsfiddle.net/pnfaps7L/2/

And here is a snippet:

*::selection {
  background: #333;
}

*::-moz-selection {
  background: #333;
}

body {
  background-color: #fff;
  font-family: 'Hind', sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

#favul {
  list-style-type: decimal;
  font-family: 'Josefin Sans', sans-serif;
  padding-left: 8vw;
  margin: 6.5vh auto;
}

#favul>li {
  margin: 1vw 0;
}

#favtit {
  text-align: center;
}

#fav {
  border: 1px solid #000;
  font-size: 48px;
  padding: 15px;
  width: 1000px;
  height: 90vh;
  overflow: hidden;
  background-color: #0A4366;
  position: absolute;
}

#images {
  position: absolute;
  bottom: 0%;
  left: 0%;
}

#images>img {
  max-width: 100%;
  height: auto;
  width: auto\9;
}

<div id="fav">
    
    <p id="favtit">My Favorite Characters</p>
    
    <ul id="favul">
      <li>The Flash</li>
      <li>Batman</li>
      <li>Green Arrow</li>
      <li>Dr. Manhattan</li>
    </ul><!--#favul-->
    
    <div id="images">
      <img src="http://nof.bof.nu/dccomics/characters.jpeg" alt="characters" />
    </div><!--#images-->    
    
  </div><!--#fav-->

Press the full screen or otherwise you wont get my problem.

Answer 1

Set #fav's width:100%; and max-width: 1000px;, it will adjust width according to screen size.

#fav {
    border: 1px solid #000;
    font-size: 48px;
    padding: 15px;
    max-width: 1000px;
    width:100%;
    height: 90vh;
    overflow: hidden;
    background-color: #0A4366;
    position: absolute;
}

Updated fiddle

Answer 2

Use this. It will solve the problem

img {max-width: 100%}