javascript - 滑动 slider : how to make images smaller but still cover the whole window?

Question

我正在使用 Swiper 创建一个占据整个窗口的 slider ，减去几个像素作为一个栏——没问题。( https://i.imgur.com/2MIJOvs.jpg )但是，如您所见，我为幻灯片 (https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) 放入的图像确实被放大了。

如何让图像显示更多的宽度，使其看起来不那么放大/质量不佳？

我尝试在样式/CSS 中修改一些宽度/高度设置，但要么什么都没有改变，要么整个容器/包装器都被弄乱了。

CSS:(在 style 标签中的 html head 中)

    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      width: 100%;

    }
    .swiper-slide img{
        min-width:100%;
    }

Javascript:

  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 0,
      centeredSlides: true,
      autoplay: {
        delay: 8000,
        disableOnInteraction: false,
      },
      loop:true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

  </script>

HTML:

  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

        <div class="swiper-slide" style= "background-image:url
        (&quot;https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260&quot;);"></div>

     </div>
     <!-- If we need navigation buttons -->
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>

   <!-- Add Pagination -->
   <div class="swiper-pagination"></div>


</div>

Answer 1

这是关于全屏的小更新swiper slider 。

var galleryTop = new Swiper('.gallery-top', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 10,
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  height: 100%;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.js"></script>
<!-- Swiper -->
<div class="swiper-container gallery-top">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
    <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>