I am currently working on an ionic app that utilizes the ion-slides directive with a swiper slider to create an image slider. Here is a snippet of how it appears 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>
In addition, this is the corresponding CSS styling for the slider:
.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 issue arises when I either do not assign a height to the slides class or set it to 100% or auto. This results in the images not being visible due to the unset height. On the other hand, if I specify a fixed height for the slides class, the images do not resize correctly and end up stretching horizontally on larger screens. How can I address this problem?