Динамическая ширина изображения в слайдере (CSS)

#css #slider #resize

Не могу сделать динамическую ширину изображений в слайдере веб сайта (HTML + CSS
+ JS). При открытии окна браузера ширина первого слайда на всю ширину окна (как и надо),
но если растянуть/развернуть окно браузера, ширина изображения не меняется и последующие
слайды идут с такой шириной, какая была при первоначальном открытии страницы в браузере.
Пробовал width 100%, auto, inherit делал разные вариации object-fit, но результата
это не пренесло.
Буде благодарен за помощь.



#slider {
  width: 100%;    
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  position: relative;
  display: block;
  margin: 0px auto;
  overflow: hidden;   
  border-radius: 3px;
}
#slider1 {
  width: 100%;        
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  position: absolute;
  display: block;
}
.slider_items {
  width: 100%;
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
}
.slider_info {
  width: 100%;
  height: 70px;
  display: inline-block;
  bottom: 90px;
  position: relative;
  background: rgba(104,204,204,.3);
  z-index: 99;
}

.slider_img {
  width: inherit;
  max-width: 1920px; 
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
}

  


  


    

      
      

        
Slide1 title
        
This is the description for slide1 Learn more
      
    

    

      
      

        
Slide2 title
        
This is the description for slide2 Learn more
      
    
  




    

Ответы

Ответ 1

FlexSlider тебе в помощь, он изначально адаптивный

HTML:


  

    

      
    
    

      
    
    

      
    
    

      
    
  



JS:

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});


Ответ 2

window.onresize = function(){ location.reload();}


и в CSS width:100%,если  я вас правильно понял