适合幻灯片的图像问题答案

【问题标题】：Issues with images fitting in a slideshow适合幻灯片的图像问题
【发布时间】：2015-02-12 14:00:06
【问题描述】：

我需要这些图片在幻灯片中居中，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;
}

【问题讨论】：

如果您的滑块是固定宽度/高度.. 要么让您的图像相对宽度/高度适合，或者能够裁剪图像以适合.. 使用背景图像更容易完成。
使用背景图片更容易吗？你的意思是？以及我将使图像适合的代码

标签： css position padding

【解决方案1】：

如果你设置这样的 CSS 规则会怎样：

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

这应该按比例调整图像大小，以便您可以看到整个内容，并填充其父容器。

webkit 在评论中的意思是，你应该在 CSS 中设置 image 属性，如下所示：

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

【讨论】：