Question

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

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

Answer 1

DEMO
您正在使用的插件的宽度和高度在px更多，因为它将它们设置为内联样式，具有最高优先级来克服此问题，如果没有办法可以使用!important但是如果您给{ {1}}和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%;
}

请注意：
如果您使用此处使用的插件滑块，请进行工作演示，以便志愿者可以轻松告诉您错误的位置仅供参考：如果您使用jQuery插件CDN，您可以在此找到每个jQuery库，这将有所帮助

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

1 个答案: