Question

使用jQuery 3.1.1，Bootstrap 3.3.7和Swiper 3.4.1，我希望全屏显示Swiper库，但是这样可以在不需要滚动的情况下查看图像，尤其是在调整浏览器大小时。

使用提供的代码，我可以显示Swiper库，图像仅在X轴上可见，但Y轴使页面垂直滚动。

当我改变窗口宽度时自动调整高度但是当窗口高度改变时不自动调整宽度，导致垂直滚动条？

我做错了什么？

HTML

<div class="viewer">
  <div class="swiper-container" id="popupGallery">
    <div class="swiper-wrapper">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_1.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_2.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_3.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_4.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_5.jpg">
    </div>
    <div class="popupGalleryPrev" style="position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
    <div class="popupGalleryNext" style="position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
  </div>
</div>

CSS

.viewer {
  background-color: #666;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

JS

var popupGallery = new Swiper('#popupGallery', {
  loop: true,
  nextButton: '.popupGalleryNext',
  prevButton: '.popupGalleryPrev',
  spaceBetween: 2
});

Answer 1

您无法自动调整图片的宽度和高度，并始终在不拉伸的情况下填充屏幕（X轴）。

我不知道是否有img-Tags（没有拉伸）的解决方案，但如果你使用背景图片，你可以存档你想要的东西。

只需给包装器max-height: 100vh;（vh是视口高度的100％）并将背景图像设置为background-size: contain;

Fiddle

HTML

<div class="viewer">
  <div class="swiper-container" id="popupGallery">
    <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
    <div class="popupGalleryPrev" style="position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
    <div class="popupGalleryNext" style="position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
  </div>
</div>

<强> CSS

.viewer {
  background-color: #666;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  max-height: 100vh;
}
.swiper-slide {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.swiper-slide:nth-of-type(1) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_1.jpg');
}
.swiper-slide:nth-of-type(2) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_2.jpg');
}
.swiper-slide:nth-of-type(3) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_3.jpg');
}
.swiper-slide:nth-of-type(4) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_4.jpg');
}
.swiper-slide:nth-of-type(5) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_5.jpg');
}
.swiper-slide:nth-of-type(6) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_1.jpg');
}
.swiper-slide:nth-of-type(7) {
  background-image: url('https://static.reades.co.uk/1001-487d/0/image_2.jpg');
}

虽然，你的图片之间会有一些讨厌的间隙..你可以添加另一个div并将它放在swiper-slide中......

请勿忘记在css中为重复的幻灯片添加2张图片（因为循环设置）

希望有所帮助。

Swiper - 调整浏览器大小时，图像必须保持100％可见

HTML

CSS

JS

1 个答案: