Swiper slider - setting responsive images for different size screens

Question

I have an ionic app, and I use ion-slides directive which uses swiper slider, for an image slider. This is how it looks in the view:

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

And this is the CSS for it:

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

The problem is if don't give any height to slides class or set it to 100% or auto, the images are not visible, since the height is not set. When I do have a set height for slides, then they don't resize correctly, since the height is set, and the images stretch horizontally then on bigger screens. How can I fix that?

Answer 1

Swiper has by default swiper-wrapper position set to absolute. I have overwrite that to position: relative;, and then I was able to set the slides height to auto. So, this is the end solution that worked for me:

.slides {
  height: auto;
}

.swiper-wrapper {
  position: relative;
}