Проблемы с изображениями в слайд-шоу

Question

Мне нужно, чтобы эти изображения были центрированы в этом слайд-шоу, background-color черный, поэтому, если он не заполняет всю ширину или высоту, окружающая область просто черная. Мне нужно, чтобы изображения полностью соответствовали.

Как правильно масштабировать эти изображения? Это мой код до сих пор:

<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

Что делать, если вы установили правило CSS, как это:

.nivoSlider img { 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

Это должно размер изображения пропорционально, так что вы можете увидеть все это, и поэтому он заполняет его родительский контейнер.

Что WebKit имел в виду комментарий был, что вы должны установить свойство изображения в CSS, например:

.nivoSlider { 
    background-image: url(<path to image>); 
}