当我调整浏览器的大小时，‘t滑块图像不会调整大小

Question

我要直截了当地说..。

我使网站响应和我使用的bxslider功能工作良好，但我想要的是适合的图像在各自的div，当我试图调整大小.

但当我忽略了调整大小事件的slider.reloadShow()时.图像大小调整得很好..。滑块事件不再有效..。

<div class="outside">
    <div class="custom-controls">
        <ul>
            <li><span id="slider-prev"></span></li>
            <li><span id="slider-next"></span></li>
    </div>
</div>
    <div class="slide-content">
    <div class="slider8">
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9" width="100%"></div>
      <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10" width="100%"></div>
    </div>
</div>

JQUERY

    var slider;
    $(document).ready(function(){
         slider=$('.slider8').bxSlider({
            auto: true,
            autoHover: true,
            // autoControls: true,
            mode: 'vertical',
            minSlides: 5,
            slideMargin: 10,
            pager: false,
            speed: 2000,
            nextSelector: '#slider-next',
            prevSelector: '#slider-prev',
            pager: false,
            pause: 100,
            nextText: '<i class="fa fa-caret-down"></i>',
            prevText: '<i class="fa fa-caret-up"></i>'
          });



        $(window).resize(function(){
            slider.reloadShow();
        });

    });

Answer 1

您可以通过css来完成这一任务。

.slide-content .slide img { width:100%; }