Ionic - 图片库的动态列

Question

我有一个在网格中显示图像列表的页面。每张图片都有恒定的高度和宽度。当用户调整浏览器大小或加载页面时，我希望每行的图像数量取决于屏幕大小。对于更大的屏幕尺寸，更多的图像。 现在我试过了。

<ion-grid>
    <ion-row>
        <ion-col col-3  *ngFor="let product of products">

            <ion-card>
                <ion-card-content>
                    <div (click)="OpenProductDetails(product.ProductId)">
                        <img src="{{product.MainMediaUrl}}" style="height:200px; width:200px; margin:auto; margin-top:15px" />                         
                    </div>

                </ion-card-content>

            </ion-card>

        </ion-col>
    </ion-row>
</ion-grid>

现在在页面加载时，它可以正确加载，但是当我更改浏览器大小或将纵向设置为横向时，它仍然是相同的并且没有响应。

我该如何解决这个问题。

Answer 1

您可以像这样为网格列设置断点

<ion-col col-xs-3 col-sm-4 col-md-2 col-lg-2 col-xl-1 *ngFor="let product of products">

• col-xs- 为min-width: 0px 和转发设置col。
• col-sm- 为 min-width: 576px 和转发设置 col。
• col-md-为min-width: 768px和转发设置col。
• col-lg- 为min-width: 992px 和转发设置col。
• col-xl- 为min-width: 1200px 和转发设置col。

知道了这一点，如果你设置了 col-md-，它将为 cols lg 和 xl 设置相同的数字。看看什么对您的问题更好，如果在较大的显示中图像中断，那么您可以在 mddisplays 或更大时设置较少的列数。

希望这会有所帮助。