滑块引导 JQuery 无响应图像答案

【问题标题】：Slider Bootstrap JQuery Unresponsive Images滑块引导 JQuery 无响应图像
【发布时间】：2023-03-10 15:57:02
【问题描述】：

我使用 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>

【问题讨论】：

标签： image responsive-design resize slider

【解决方案1】：

图像作为背景加载，因此不会根据容器调整大小。要调整背景大小，您可以使用：background-size:cover，另请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

【讨论】：