Swiper

Question

使用 jQuery 3.1.1、Bootstrap 3.3.7 和 Swiper 3.4.1，我想全屏显示 Swiper 图库，但有它所以图像始终可见而不需要滚动，尤其是在调整浏览器大小时。

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

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

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-axis) 而不拉伸它。

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

只需给包装器一个 max-height: 100vh;（vh 是视口高度的 100%）并将 background-images 设置为 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% 可见

Swiper - When browser is resized, image must remain 100% viewable

html

javascript

css

twitter-bootstrap

HTML

CSS

JS