使用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将拉伸图像...如果它们按比例调整大小，这样可以正常工作......

但是，如果您可能正在处理一些肖像和某些风景图像，请尝试仅设置高度或仅设置宽度;然后，在需要时添加对中心的调整。