I want to show slide images in portrait and landscape orientation.
Problem : When i rotate image image not set in full screen width
Here is my code
<ion-slides color = "light" #mySlider (ionSlideAutoplayStop)="autoPlay(mySlider)" (ionSlidesDidLoad)="slidesDidLoad(mySlider)" *ngIf="slideData && slideData.length" autoplay="50" loop="true" speed="500" class="slides" [options]="slideOpts">
<ion-slide (resized)="mySlider.update()">
<div class="bg"></div>
</ion-slide>
<ion-slide (resized)="mySlider.update()">
<div class="bg1"></div>
</ion-slide>
<ion-slide (resized)="mySlider.update()">
<div class="bg2"></div>
</ion-slide>
I have added CSS like this on each slide
ion-slides {
margin-top: 0px;
height: 100%;
width: 100%;
flex: 1;
}
ion-slide {
background-color: black;
}
.bg-style {
background: #000000;
}
.bg {
background-image: url(/assets/slide-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}
.bg1 {
background-image: url(/assets/slide-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
}
page.css
ion-slides{
ion-slide {
height: 200px;
width: 100% !important;
img{
height: 200px;
width: 100%;
object-fit: cover;
}
}
}