我正在使用 Ionic 5 和ion-slides做一个应用程序。
我正在尝试将图像宽度设置为 100%,以便能够更好地看到它们。现在的图像左右两边都有空间,我不知道如何删除它。
<ion-content>
<ion-slides [options]="slideOpts" pager>
<ion-slide *ngFor="let i of menu.images">
<img [src]="i" alt="">
</ion-slide>
</ion-slides>
</ion-content>
我努力了:
// Method 1
ion-slides {
ion-slide >:first-child {
width: 100%;
}
}
// Method 2
ion-slide >:first-child {
width: 100%;
}
// Method 3
ion-slide {
width: 100%;
}
// Method 4
ion-slide img {
width: 100%;
}
另外,我尝试将 img 包装在 div 中:
<ion-slides [options]="slideOpts" pager>
<ion-slide *ngFor="let i of menu.images">
<div class="slide-img">
<img [src]="i" alt="slide"/>
</div>
</ion-slide>
</ion-slides>
// And
.slide-img {
width: 100% !important;
}
但是,左右还有空间。
我的任何尝试似乎都不起作用。
我的目标是将图像宽度设置为 100% 并保持图像质量。