离子载玻片支持横向离子应用

Question

我想以纵向和横向显示幻灯片图像。

问题：当我旋转图像图像未设置为全屏宽度时

这是我的代码

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

我在每张幻灯片上都添加了这样的 CSS

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

Answer 1

页面.css

ion-slides{
ion-slide {
height: 200px;
width: 100% !important;
img{
height: 200px;
width: 100%;
object-fit: cover;
}
}
}