使用浏览器窗口调整幻灯片背景大小

make slideshow background resize with browser window

本文关键字：背景 幻灯片 调整 浏览器 窗口      更新时间：2023-09-26

我希望作为网站背景的幻灯片中的图像能够像浏览器一样调整大小。下面是我的代码，它似乎还没有改变任何东西。

$(document).ready(function() {
  $('#slideshow').cycle({
    fx: 'fade',
    pager: '#smallnav',
    pause: 1,
    speed: 1800,
    timeout: 8500
  });
});
#slideshow,
img.bgM {
  min-height: 100%;
  min-width: 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9999;
}
<div id="slideshow">
  <img src="images/back/1.JPG" alt="image1" class="bgM" />
  <img src="images/back/2.JPG" alt="image1" class="bgM" />
  <img src="images/back/3.JPG" alt="image1" class="bgM" />
  <img src="images/back/4.JPG" alt="image1" class="bgM" />
  <img src="images/back/5.JPG" alt="image1" class="bgM" />
  <img src="images/back/6.JPG" alt="image1" class="bgM" />
  <img src="images/back/7.JPG" alt="image1" class="bgM" />
  <img src="images/back/8.JPG" alt="image1" class="bgM" />
  <img src="images/back/9.JPG" alt="image1" class="bgM" />
  <img src="images/back/10.JPG" alt="image1" class="bgM" />
  <img src="images/back/11.JPG" alt="image1" class="bgM" />
  <img src="images/back/12.JPG" alt="image1" class="bgM" />
  <img src="images/back/13.JPG" alt="image1" class="bgM" />
  <img src="images/back/14.JPG" alt="image1" class="bgM" />
</div>

DEMO
您正在使用的插件在px中提供的宽度和高度比它将它们设置为具有最高优先级的内联样式更多。如果没有办法，您可以使用!important，但如果您提供max width和max-height，则不需要!important

$(document).ready(function() {
  $('#slideshow').cycle({
    fx: 'fade',
    pager: '#smallnav',
    pause: 1,
    speed: 800,
    timeout: 500
  });
});
#slideshow,
.bgM {
  max-width: 100%;
  max-height: 100%;
  position: fixed;
  min-width: 100%;
  min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>
<div id="slideshow">
  <img src="http://spicyip.com/wp-content/uploads/2015/04/open-source-software-1.jpg" alt="image1" class="bgM" />
  <img src="http://www.rapidsoftsystems.com/img/nimages/opensource.gif" alt="image1" class="bgM" />
</div>

请注意：
如果你使用类似插件的滑块，请制作工作演示，这样志愿者就可以很容易地告诉你哪里出错了
仅供参考：如果你使用jQuery插件CDN，你可以在其中找到每个jQuery库，这将有助于

相关文章：