使用Jquery进行幻灯片演示，图像不适合窗口

Question

我正在尝试使用jquery制作幻灯片，我在这段代码中还是个菜鸟，只熟悉css和html（尽管我不确定如何在css中放置内容）。 我想创建幻灯片并遵循此模板，但是我不知道如何更改它的方面，我尝试弄乱它，但是没有运气。 我的图像比创建的滑动窗口大得多，我想将图像适合窗口，因为现在只显示了图像的一部分，看起来不太好。

所以我想知道如何在幻灯片窗口中放置整个图像（而不是一部分）

这是我拥有的html：

<div id="slideshow">
<div id="slideshowWindow">
    <div class="slide">
        <img src="Images/DSC_0419 copy.JPG" />
    </div>
    <div class="slide">
        <img src="Images/DSC_1019 copy.JPG" />
    </div>
    <div class="slide">
        <img src="Images/DSC_2975.JPG" />
    </div>
</div>
</div>

我的CSS：

#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;

}

#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px; 
height:700px;
float:left;
position:relative;

}

这是我的Jquery脚本：

<script type="text/javascript">
$(document).ready(function() {

    var currentPosition = 0;
    var slideWidth = 1000;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;

    slideShowInterval = setInterval(changePosition, speed);
    slides.wrapAll('<div id="slidesHolder"></div>')
    slides.css({ 'float' : 'left' });
    $('#slidesHolder').css('width', slideWidth * numberOfSlides);   
    function changePosition() {
        if(currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }
    function moveSlide() {
            $('#slidesHolder')
              .animate({'marginLeft' : slideWidth*(-currentPosition)});
    }
});
</script>

Answer 1

尝试...

#slideshow #slideshowWindow .slide img {
  height: 100%;
  width: 100%;
}

照原样，上面的CSS将拉伸图像...如果按比例调整大小，则效果很好...

但是，如果您要处理的是纵向和横向的某些图像，请尝试仅设置高度或宽度；否则，请执行以下步骤。 然后，在需要时将调整添加到居中位置。