在jquery滑塊內的響應圖片

Question

我的圖片在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'); 
          }); 
    } 

Answer 1

而不是使用img標籤可以作爲背景圖片添加到div

<div id="indexSlider"> 
    <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div> 
    <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div> 
    <div class="indexImg" style="background-image: url('imgs/test/test3.jpg');"></div> 
</div> 

的

而關於CSS

.indexImg { 
    height: 45rem; 
    width: 100%; 
    background-repeat:none; 
    background-size:cover; 
    background-position:center; 
}