Issues with images fitting in a slideshow - css

Question

I need these images to be centered in this slideshow, the background-color is black, so if it doesn't fill the entire width or height then the surrounding area is just black. I need the images to completely fit.
How can I scale these images to fit properly? This is my code so far:
<div id="logo">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/mondepic1.jpg" alt="" />
<img src="images/img20.jpg" alt="" />
<img src="images/img22.jpg" alt="" />
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
</div>
#slider-wrapper {
background:black;
width: 978px;
height: 389px;
margin:0 auto;
}
#slider {
position:relative;
width: 978px;`enter code here`
height: 389px;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:relative;
top:0px;
left:0px;
display:none;
max-height:100%;
max-width:100%;
}
#slider a{
border:0;
display:block;
}

Answer 1

What if you set a CSS rule like this:
.nivoSlider img {
background-repeat: no-repeat;
background-size: cover;
}
This should size the image proportionally so you can see the whole thing, and so it fills its parent container.
What webkit meant in the comment was, that you should set the image property in CSS, like this:
.nivoSlider {
background-image: url(<path to image>);
}