Image 滑块引导JQuery无响应图像

我使用Bootstrap&jQuery构建了一个包含4个图像的滑块，但我不明白为什么我的图像不会自动调整大小，因为它应该是响应性的

非常感谢任何帮助

  <style>
      body, html {
          padding: 0px;
          margin: 0px;
    }
      .banner {
          position: relative;
          width: 100%;
          overflow: auto;
          padding: 0px;
          margin: 0px;
      }
      .banner ul {
          padding: 0px;
          margin: 0px;
      }
      .banner li {
          list-style: none;
          padding: 0px;
          margin: 0px;
      }
      .banner ul li {
          float: left;
          padding: 0px;
          margin: 0px;
          min-height: 450px;
          background-size: 100% auto;
      }
  </style>

---

图像作为背景加载，因此不会根据容器调整大小。要调整背景大小，可以使用：背景大小：封面，另请参见

 <div class="banner">
     <ul>
         <li style="background-image: url('images/Petra 1.jpg');">
         </li>
         <li style="background-image: url('images/Petra 2.jpg');">
         </li>
         <li style="background-image: url('images/Petra 3.jpg');">
         </li>
         <li style="background-image: url('images/Petra 4.jpg');">
         </li>
     </ul>
 </div>

<script>
    $(document).ready(function () {
        $('.banner').unslider({
            speed: 600,   //Speed in milliseconds
            delay: 3000, // To delay between slide (in milliseconds
            keys: true,
            fluid: true,
        });
    });
 </script>