組隊，探索流體圖像縮放

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