Picture on full width screen - html

Question

I would like to cover the image on of my page the full width of the screen. (so not the whole screen but only the width) and if possible I would also like if the image shrinks if the screen gets smaller. I never did this before so i don't really know how I can make this? Can anybody help me?
this is how my page currently looks like
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html, body{
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#Anouk img{
display: block;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>

Answer 1

You need to set your img to width="100%" or set a css class on the image for whatever %.

Answer 2

And you need to add:
margin: 0px;
padding: 0px;
To The body because some Browsers (like chrome) are having a standard margin and padding.
PS: I wanted to comment but I cant because my Reputation is to low :(