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

您不能使图片自动调整其宽度和高度，并且在不拉伸(stretch)的情况下始终填满屏幕(X 轴)。

我不知道是否有 img-Tags 的解决方案(不拉伸(stretch)它)，但如果您使用背景图像，您可以存档您想要的内容。

只需给包装器一个 max-height: 100vh;(vh 是视口(viewport)高度的 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 张图片(由于循环设置)

希望对您有所帮助。