CODEWITHSUNDEEP
javascripthtmlcssswiper.js
Yeats
Yeats

Reputation: 2065

Swiper fluid image scaling

Using Swiper, I have a very standard setup:

<div class="swiper-container">

    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image/whatever.jpg"></div>
        <div class="swiper-slide"><img src="image/whatever.jpg"></div>
        <div class="swiper-slide"><img src="image/whatever.jpg"></div>
    </div>

    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>

</div>

Same with CSS:

.swiper-container {
    width: 95%;
    height: auto;

}

.swiper-slide {
        text-align: center;
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

What I'd wish, though, is that I could decrease the size of the window and have the container automatically adjust its size. As it is, only the width is actually adjusted, the height stays the same, no matter if I use auto or a percent value.

The result is that my images get squashed, when I'd like them to retain their proportions.

How can I achieve this? (CSS or JS solutions are both perfectly fine).

Upvotes: 0

Views: 9822

Answers (2)

Ezio conner
Ezio conner

Reputation: 1

Try this:

.swiper-wrapper {
  height:auto !important;
  width:100%;
}

Upvotes: 0

Rafael Topasi
Rafael Topasi

Reputation: 51

Try this code:

.yourFluidImage {
     width:100%;
     height:auto;
}

.swiper-wrapper {
     height:auto !important;
}

.swiper-slide {
     height:auto !important;
}

Upvotes: 2

Related Questions