Ionic新手求教：如何实现每张图片单独占一行？

嘿，刚接触Ionic是吧？别着急，你的问题很好解决！

你现在的代码是把所有图片的<ion-col>都塞进同一个<ion-row>里，所以它们会按照col-6的设定并排显示（一行两张）。要实现每张图片单独占一行，只需要把*ngFor循环从<ion-col>移到<ion-row>上就行——这样每遍历一张照片，就会生成一个独立的行，每个行里只放这一张图片的列。

修改后的代码应该是这样的：

<ion-grid>
  <ion-row *ngFor="let photo of photoService.photos">
    <ion-col>
      <img [src]="photo.data" />
    </ion-col>
  </ion-row>
</ion-grid>

这里我去掉了col-6，因为<ion-col>默认会占满整个<ion-row>的宽度，刚好符合你要的单张图片占一行的需求。如果你想调整图片的显示效果（比如让它居中且不要撑满整个屏幕宽度），可以给网格和图片加些样式优化：

<ion-grid>
  <ion-row *ngFor="let photo of photoService.photos" class="justify-content-center">
    <ion-col size-md="8" size-sm="10">
      <img [src]="photo.data" class="img-fluid" style="max-height: 400px; object-fit: contain;" />
    </ion-col>
  </ion-row>
</ion-grid>

上面的例子里，用了Ionic网格的响应式尺寸（中等屏幕占8列，小屏幕占10列），加了justify-content-center让列居中，img-fluid确保图片自适应列宽，还通过内联样式限制了图片最大高度、保证图片比例不变。

这样调整后，每张照片就会单独占据一行啦！

内容的提问来源于stack exchange，提问作者mina