Img doesn't resize with browser - html

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%}