Swiper流体图像缩放

Question

使用Swiper，我有一个非常标准的设置：

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

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;
    }

不过，我希望我可以减小窗口的大小，让容器自动调整它的大小。实际上，只有width是实际调整的，无论我使用auto还是百分比值，height都保持不变。

结果是我的图像被压缩了，而我想要它们保持它们的比例。

我如何才能做到这一点？(CSS或JS解决方案都很好)。

Answer 1

尝试以下代码：

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

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

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

Answer 2

试试这个：

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