Javascript 使用Jquery进行幻灯片放映，图像不适合窗口

我正在尝试使用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>

}

}

这是我的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>

$（文档）.ready（函数（）{
var currentPosition=0；
var slideWidth=1000；
变量幻灯片=$（'.slide'）；
var numberOfSlides=slides.length；
var幻灯片放映间隔；
var速度=3000；
slideShowInterval=设置间隔（改变位置、速度）；
幻灯片。wrapAll（“”）
css（{'float'：'left'}）；
$（“#幻灯片文件夹”）.css（'width'，slideWidth*numberOfSlides）；
函数changePosition（）{
如果（currentPosition==numberOfSlides-1）{
currentPosition=0；
}否则{
currentPosition++；
}
moveSlide（）；
}
函数moveSlide（）{
$（“#幻灯片播放器”）
.animate（{'marginLeft'：slideWidth*（-currentPosition）}）；
}
});

试试

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

实际上，上面的CSS将拉伸图像。。。如果它们的大小成比例，这工作很好

---

然而，如果你可能要处理一些肖像和风景图片，试着只设置高度或宽度；然后，在需要时对中心进行调整。

OMG非常感谢！我知道这很简单，我只是完全不知所措！万分感谢`我不能投票，但它是有效的，谢谢！

<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>

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