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实际调整，height保持不变，无论我使用auto还是百分比值。

结果是，当我希望他们保留比例时，我的图像会被压扁。

我怎样才能做到这一点？（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%;
}

Swiper流体图像缩放

2 个答案: