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中设置image属性，如下所示：

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

适合幻灯片放映的图像问题

1 个答案: