使用 Jquery 的幻灯片放映，图片不适合 window

Question

我正在尝试使用 jquery 制作幻灯片，我是这段代码的新手，只熟悉 css 和 html（尽管我不确定如何在 css).我想创建我的幻灯片并遵循此模板，但我不知道如何更改它的各个方面，我尝试弄乱它但没有运气。我的图像比创建的幻灯片 window 大得多，我想让图像适合 window，因为现在只显示图像的一部分，看起来不太好。

所以我想知道如何将完整图像放入该幻灯片window（不是一部分）

这是我的 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 将拉伸图像...如果它们按比例调整大小，则效果很好...

但是，如果您可能要处理一些纵向图像和一些横向图像，请尝试只设置高度或宽度；然后，在需要时添加中心调整。

使用 Jquery 的幻灯片放映，图片不适合 window

Slideshow using Jquery, images do not fit window

html

javascript

css

jquery

slideshow