javascript - 当我调整浏览器大小时，bxslider slider 图像不会调整大小

Question

我要开门见山了..

我正在使网站响应并且我正在使用 bxslider 该功能工作正常但我想要的是在我尝试调整大小时将图像放入各自的 div 中...

但是当我在调整大小事件中省略 slider.reloadShow() 时...图像调整大小就很好... slider 事件将不再起作用..

HTML

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