从狭窄的窗口拖动到宽时，jQuery循环插件调整大小错误

Question

我正在将JQuery Cycle Plugin用于设置为100％宽度的图像。我发现以较窄的宽度加载或重新加载页面，然后将浏览器调整为较宽的宽度时，得到的结果不一致。通常，预计幻灯片会随着页面扩展而变窄。

如果我从较宽的宽度刷新或加载，然后重新调整大小并重新备份，则此行为不存在。

图像的自然宽度为882px。我知道如果我拉伸它们会失去质量。如果出现问题，我将替换它们。

当调整浏览器或视口的大小时，如何确保幻灯片始终调整大小？

样式：

  #home_cycle_wrapper{
    position: relative;
    width: 100%;
    min-height: 554px;
  }

  #mainPageCopy{
    border-left: 0px
    solid #ddd;
    position: absolute;
    top: 40px;
    left: 67%;
    z-index: 5;
    background-color: white;
    width: 27%;
    padding: 15px;
    color: black;
    font-size: 3vmin;
  }

JS：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
        $('#home_cycle').cycle({    
        fit:           1,     
        fx:            'fade', 
        width: '100%',
   });
    });
  </script>

HTML片段

    <div id="home_cycle_wrapper" >
    <div id="home_cycle" class="home_image_container">
      <img src="/images/main_harbour_island.jpg">
      <img src="/images/main_downtown2.jpg">
    </div>
    <div id="mainPageCopy" class="copy">
        <p>Lorem ipsum dolar sit amet blasai blah whosit can whatsamajigget...</p>
     </div>  
  </div>