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

Question

使用 jQuery 3.1.1、Bootstrap 3.3.7 和 Swiper 3.4.1，我想全屏显示 Swiper 画廊，但拥有它，因此无需滚动即可始终查看图像，尤其是在调整浏览器大小时。

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

我做错了什么导致它在窗口宽度改变时自动调整高度但在窗口高度改变时不自动调整宽度，导致垂直滚动条？

JSFiddle Link

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 并将其居中在滑动幻灯片中..

不要忘记在您的 css 中为复制的幻灯片添加另外 2 个图像（因为循环设置）

希望对您有所帮助。