Question

我使用Bootstrap＆amp; amp;创建了一个带有4个图像的滑块。 jQuery，但是我无法解决为什么我的图像不会调整大小（因为它们应该自动调整，因为它应该是响应的）。

非常感谢任何帮助！

  <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>

Answer 1

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

滑块Bootstrap JQuery无响应的图像

1 个答案: