滑动旋转木马响应

Question

我使用 Swipe 轮播，我需要它来做出响应（在调整浏览器大小时降低图像高度和宽度），但不确定为什么，left join applicationcustomerdata g on g.applicationid = e.applicationid and g.time_stamp in (select max(x.time_stamp) from applicationcustomerdata x where x.applicationid = g.applicationid ) left join applicationdata i on i.applicationid = e.applicationid and i.time_stamp in (select max(z.time_stamp) from applicationdata z where z.applicationid = i.applicationid ) 宽度仍然更大，虽然它的宽度是自动的。有人遇到过这样的问题吗？浏览器最大化后，图像宽度也不会更新。请参见截图。

HTML

.swiper-slide

JS

<div class="block-carousel">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img2.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img2.jpg') ?>
      </div>
      <div class="swiper-slide">
        <?= HTML::image('/assets/images/tmp/carousel/img1.jpg') ?>
      </div>
    </div>

    <div class="swiper-pagination">
      <div class="swiper-prev">
        <i class="fa fa-angle-left"></i>
      </div>
      <div class="swiper-next">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
</div>

CSS

$(document).ready(function(){
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    nextButton: '.swiper-next',
    prevButton: '.swiper-prev',
    paginationClickable: true
  });

  var imgHeight = $(window).width()/2;
  $('.swiper-slide').each(function(){
    var width = $(this).children('img').width();
    $(this).css('width', width + 'px');
  });

  $('.block-carousel').css('height', imgHeight + 'px');
});

$(window).resize(function() {
  var imgHeight = $(window).width()/2;

  $('.swiper-slide').each(function(){
    var width = $(this).children('img').width();
    $(this).css('width', width + 'px');
  });

  $('.block-carousel').css('height', imgHeight + 'px');
});

代码很小巧，但由于某些原因，代码无效。

注意： 我只想让轮播响应（在浏览器调整大小期间调整图片高度/宽度）