Отзывчивый Img в слайдере JQuery

Question

У меня проблема с моими изображениями в слайдере jquery. Ползунок работает, но есть пара проблем. Я могу реагировать на изображения, но когда я удаляю свойство height, содержимое ниже стреляет в слайдер. Поэтому я добавляю значение высоты, но при изменении размера окна изображения искажаются. Мне было интересно узнать, где я ошибаюсь.

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