スワイパースライダー - 異なるサイズの画面に対応する画像を設定する

Question

私はionic appです。イメージスライダーには、スワイパースライダーを使用するイオンスライドディレクティブを使用します。これは、ビューにどのように見えるかです：

<ion-slides ng-if="slider.length > 0 && article.external_media.length < 1" class="slides"> 
    <ion-slide-page ng-repeat="item in slider"> 
    <img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ item.image }}" class="cover"> 
    </ion-slide-page> 
</ion-slides> 

そして、これはそれのためのCSSです：

.slider {  
    &:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 200%; 
    height: 100%; 
    box-shadow: 0px 1.5rem 4.8rem 3rem rgba(0, 0, 0, 0.4) inset; 
    bottom: 5px; 
    left: -50%; 
    } 
} 

.cover { 
    width:100%; 
    position: relative; 

    &:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 200%; 
    height: 100%; 
    box-shadow: 0px -5rem 4.8rem 3rem rgba(0, 0, 0, 0.4) inset; 
    bottom: 5px; 
    left: -50%; 
    } 
} 

.slides { 
    height: 325px; 
} 

slidesクラスに任意の高さを与えるか100%かにそれを設定しない場合は、問題がありますauto、高さが設定されていないため、画像は表示されません。 slidesの高さが設定されている場合、高さが設定されているため、画像は正しくサイズ変更されず、画像は水平方向に拡大してから大きな画面に拡大されるため、正しくサイズ変更されません。どうすれば修正できますか？

Answer 1

スワイパーのデフォルトでは、swiper-wrapperpositionがabsoluteに設定されています。私はposition: relative;に上書きしてから、slidesheightをautoに設定することができました。だから、これは私のために働いた最終的な解決策です：

.slides { 
    height: auto; 
} 

.swiper-wrapper { 
    position: relative; 
}