在ngfor中调整图像大小

Question

我试图在垂直方向上显示可滑动的图像列表，我需要在屏幕上显示两个图像，两个图像之间有空格，每次点击相机时图像的数量都会有所不同，新图像将被添加

<ion-slides>
                <img *ngFor="let file of myFiles" [height]="400/myFiles.length" [src]="file"/>
</ion-slides>



import { Camera } from 'ionic-native';    
import { File } from 'ionic-native';
import { FilePath } from 'ionic-native';
declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
myFiles: any[];
FileListing(){
        File.listDir(cordova.file.externalRootDirectory, 'Vanan/').then(
          (allFiles) => {
            // do something
            console.log("we have files", allFiles);
            this.myFiles = allFiles;
          }
        ).catch(
          (err) => {
            // do something
            console.log("file listing err", err)
          });
    }
}

上面的代码显示单个图像，并且在下一个图像的扫描到来时，我想做的是使图像尺寸变小，这样我就可以在屏幕上看到两个图像，有人可以帮助我

我从上面的代码得到的是

Answer 1

您可以根据myFiles中的图像数量和容器的高度计算要设置到每个图像的高度，例如400.

    <ion-slide>
        <img *ngFor="let file of myFiles" [height]="400/myFiles.length" [src]="file"/>
    </ion-slide>

    export class AppComponent implements OnInit {
        ngOnInit(): void {
            this.myFiles = ["./im1.png", "./im2.png", "./im3.png"];
        }
        myFiles: string[];
    }