图片得到削减在幻灯片上调整

Question

我试图做一个幻灯片，但我的图片削减，当我调整屏幕 我怎样才能使它responsive..I想要一些东西在JavaScript代码来完成，我也尝试获得相应容器的宽度和调整图像，但它不工作

<div class="container"> 
     <div class="row" style="width: 100%; margin-left: 0px;"> 
      <div id="slider"> 
       <ul class="slides"> 
        <li> 
         <img class="slide img-responsive" src="Images/free1.jpg" /></li> 
        <li> 
         <img class="slide img-responsive" src="Images/free2.jpg" /></li> 
        <li> 
         <img class="slide img-responsive" src="Images/free3.jpg" /></li> 
        <li> 
         <img class="slide img-responsive" src="Images/free4.jpg" /></li> 
        <li> 
         <img class="slide img-responsive" src="Images/free5.jpg" /></li> 
        <li> 
         <img class="slide img-responsive" src="Images/free1.jpg" /></li> 

       </ul> 

      </div> 


     </div> 


    </div> 

$(document).ready(function() { 
    var width = 1160; 
    var animationSpeed = 2000; 
    var pause = 1000; 
    var currentSlide = 1; 


    var $slider = $('#slider'); 
    var $slideContainer = $slider.find('.slides'); 
    var $slides = $slideContainer.find('.slide'); 
    var interval; 
    /* 
    function get_width(width) { 
     if (window.matchMedia("(min-width: 450px)").matches) { 
      width == 450; 
     } else if (window.matchMedia("(min-width: 750px)").matches) { 

      width == 700; 

     } else { 

      width == 1160; 

     } 

     return width; 

    }*/ 
    function startSlider() { 

     interval = setInterval(function() { 

      $slideContainer.animate({ 'margin-left': '-=' + width }, animationSpeed, function() { 
       currentSlide++; 
       if (currentSlide == $slides.length) { 
        currentSlide = 1; 
        $slideContainer.css('margin-left', 0); 
       } 


      }); 

     }, pause); 
    } 
    function stopSlider() { 

     clearInterval(interval); 
    } 
    //listen for mouse enter and pause 
    $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider); 




    startSlider(); 



}); 




#slider { 
width:100%; 
height:400px; 
    overflow:hidden; 



} 
    #slider .slides { 
    display:block; 
    width:8000px; 
    height:400px; 
    margin:0; 
    padding:0; 

    } 
    #slider .slide { 
    float:left; 
    list-style-type:none; 
    width:1160px; 
    height:400px;  
    } 

li { 
list-style-type:none; 
} 

Answer 1

您可以使用max-width: 100%;您<img>。例如：

.slides img { 
    max-width: 100%; 
} 

编辑

如果你想设置基于#slider宽度图像宽度，您可以使用此：

$('.slide').each(function() { 
    $(this).width($('#slider').width()); 
}); 

如果你想重新设置图像调整窗口大小时，您可以处理窗口大小调整事件。例如：

$(window).resize(function() { 
    $('.slide').each(function() { 
     $(this).width($('#slider').width()); 
    }); 
});