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

Question

I am trying to make a slideshow using jquery, I am a rooky in this code and am only familiar with css and html (though I am unsure how to position things in css). I want to create my slideshow and followed this template however I don't know how to change aspects of it, I tried messing around with it however no luck. My images are much bigger than the slide window created, I want to fit the image to the window, since now only a portion of the image is shown, which doesn't look very good.

So I was wondering how I could fit the complete image in that slidewindow (not a portion)

Here is what I have as 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>

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

}

And this is my Jquery script:

<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

Try ...

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

As it is, the CSS above will stretch the images ... if they are sized proportionately, this works fine ...

However, if you might be dealing with some images that are portrait and some landscape, try setting only height or only width; then, add adjustments to center when needed.