在Jquery滑块内响应Img(Responsive Img within Jquery slider)

 我在jquery滑块中的图像有问题。 滑块正在工作，但存在一些问题。 我可以让图像响应，但当我删除高度属性时，下面的内容会弹出滑块。 然后我添加一个高度值，但在重新调整窗口大小时图像会变形。 我想知道你是否能看到我出错的地方。 
 
 HTML 
 
         <div id="indexSlider" class="indexImg">
            <div><img class="indexImg" src="imgs//test/test1.jpg"></div>
            <div><img class="indexImg" src="imgs/test/test2.jpg"></div>
            <div><img class="indexImg" src="imgs//test/test3.jpg"></div>
        </div>
 
 CSS 
 
 .indexImg {
height: 45rem;
width: 100%;    
}


 #indexSlider div {
position:absolute;
z-index: 0;
}

 #indexSlider div.previous {
z-index: 1;
}

 #indexSlider div.current {
z-index: 2;
}
 
 JQUERY 
 
 $(function() {
        // create the image rotator
        setInterval("rotateImages()", 2000);
    });

    function rotateImages() {
        var oCurPhoto = $('#indexSlider div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#indexSlider div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 700,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }

I have a problem with my images in a jquery slider. The slider is working, but there are a couple of problems. I can have the images responsive, but when I remove the height property, the content below shoots up into the slider. So I then add a height value, but the images become distorted when re-sizing the window. I was wondering if you can see where I am going wrong. 
 
HTML
 
         <div id="indexSlider" class="indexImg">
            <div><img class="indexImg" src="imgs//test/test1.jpg"></div>
            <div><img class="indexImg" src="imgs/test/test2.jpg"></div>
            <div><img class="indexImg" src="imgs//test/test3.jpg"></div>
        </div>
 
CSS
 
 .indexImg {
height: 45rem;
width: 100%;    
}


 #indexSlider div {
position:absolute;
z-index: 0;
}

 #indexSlider div.previous {
z-index: 1;
}

 #indexSlider div.current {
z-index: 2;
}
 
JQUERY
 
 $(function() {
        // create the image rotator
        setInterval("rotateImages()", 2000);
    });

    function rotateImages() {
        var oCurPhoto = $('#indexSlider div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.length == 0)
            oNxtPhoto = $('#indexSlider div:first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({ opacity: 0.0 }).addClass('current')
                .animate({ opacity: 1.0 }, 700,
                            function() {
                                oCurPhoto.removeClass('previous');
                            });
    }

原文：https://stackoverflow.com/questions/31538075