Swiper fluid image scaling

Question

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).

Answer 1

Try this code:

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

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

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

Answer 2

Try this:

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