admin管理员组

文章数量:1317909

I'm using swiperJS, with multiple images but I cannot seem to get it to take the full width and height of the div it's in. I have the following styling on my images:

.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;

}

Which would normally work on an <img> tag, but it seems to take the width into account but not the height.

I'm guessing something within swiper is resizing this, but I can't only seem to find autoHeight in the docs.

Here's a code snippet of my code:

const swiper = new Swiper('.swiper-container', {
    autoHeight: true,
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 2500,
      disableOnInteraction: true,
    },

    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  })
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 40px; 
}

.slider-wrapper {
    display: flex;
    margin-bottom: 50px;
}

.slider-container {
    width: 40%;
}

.swiper-container {
    width: 100%;

}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-content {
    width: 60%;
    padding-left: 40px;
}

.slider-content h3 {
    font-size: 1.8rem;
}

.slider-content p {
    font-weight: 200;
    margin: 20px 0;
}

.slider-content p:nth-of-type(3) {
    margin-bottom: 40px;
}

.slider-content strong {
    font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=".min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <section id="slider">
      <div class="container">
        <div class="slider-wrapper">
          <div class="slider-container">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img
                    src=";ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src=";ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
                    alt=""
                  />
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>

          <div class="slider-content">
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Id,
              cupiditate.
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
              consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
              totam accusamus numquam pariatur nobis expedita in, neque,
              veritatis deserunt reiciendis id excepturi?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
              consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
              totam accusamus numquam pariatur nobis expedita in, neque,
              veritatis deserunt reiciendis id excepturi?
            </p>

            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus
              quam ducimus accusantium possimus, nihil exercitationem temporibus
              recusandae soluta quae voluptatibus.
            </p>
            <a class="btn" href="">How it Works</a>
          </div>
        </div>
      </div>
    </section>
    <script src=".js"></script>
    <script src=".min.js"></script>
  </body>
</html>

I'm using swiperJS, with multiple images but I cannot seem to get it to take the full width and height of the div it's in. I have the following styling on my images:

.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;

}

Which would normally work on an <img> tag, but it seems to take the width into account but not the height.

I'm guessing something within swiper is resizing this, but I can't only seem to find autoHeight in the docs.

Here's a code snippet of my code:

const swiper = new Swiper('.swiper-container', {
    autoHeight: true,
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 2500,
      disableOnInteraction: true,
    },

    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  })
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 40px; 
}

.slider-wrapper {
    display: flex;
    margin-bottom: 50px;
}

.slider-container {
    width: 40%;
}

.swiper-container {
    width: 100%;

}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-content {
    width: 60%;
    padding-left: 40px;
}

.slider-content h3 {
    font-size: 1.8rem;
}

.slider-content p {
    font-weight: 200;
    margin: 20px 0;
}

.slider-content p:nth-of-type(3) {
    margin-bottom: 40px;
}

.slider-content strong {
    font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg./swiper/swiper-bundle.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <section id="slider">
      <div class="container">
        <div class="slider-wrapper">
          <div class="slider-container">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img
                    src="https://images.unsplash./photo-1625523214628-4dec27885b68?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
                    alt=""
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="https://images.unsplash./photo-1625628748830-639e59adbcfc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80"
                    alt=""
                  />
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>

          <div class="slider-content">
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Id,
              cupiditate.
            </h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
              consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
              totam accusamus numquam pariatur nobis expedita in, neque,
              veritatis deserunt reiciendis id excepturi?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit hic
              consequuntur odio tempore? Saepe, tenetur suscipit perspiciatis
              totam accusamus numquam pariatur nobis expedita in, neque,
              veritatis deserunt reiciendis id excepturi?
            </p>

            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus
              quam ducimus accusantium possimus, nihil exercitationem temporibus
              recusandae soluta quae voluptatibus.
            </p>
            <a class="btn" href="https://www.google.">How it Works</a>
          </div>
        </div>
      </div>
    </section>
    <script src="https://unpkg./swiper/swiper-bundle.js"></script>
    <script src="https://unpkg./swiper/swiper-bundle.min.js"></script>
  </body>
</html>

  • javascript
  • css
  • swiper.js
Share Improve this question asked Jul 8, 2021 at 17:18 Matt DavisMatt Davis 571 gold badge1 silver badge10 bronze badges 4
  • I can't see where you have defined the height of swiper-container - it seems to be auto, but you mention the height of the element it is in. Am I looking at the wrong element? – A Haworth Commented Jul 8, 2021 at 17:36
  • Removing width: 100%; from .swiper-slide img seems to work. – Wendelin Commented Jul 8, 2021 at 17:37
  • the .swiper-container doesn't have a height value. I've tried 100% but it doesn't do anything. – Matt Davis Commented Jul 8, 2021 at 17:47
  • 1 removing the width: 100% does fill the whole div, but to the size of the image. I want to keep both the .slider-container and the .slider-content divs at the same height. so the image pushes to the bottom in line with the .slider-content text/button. – Matt Davis Commented Jul 8, 2021 at 17:49
Add a ment  | 

1 Answer 1

Reset to default 5

This worked for me

.swiper-slide{
    height: auto;
}

本文标签： javascriptSwiperJS not taking 100 height of divStack Overflow

版权声明：本文标题：javascript - SwiperJS not taking 100% height of div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742028532a2416005.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。