离子 - 图片库的动态列

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- 将 col 设置为min-width: 0px和转发。
• col-sm- 将 col 设置为min-width: 576px和转发。
• col-md- 将 col 设置为min-width: 768px和转发。
• Col-LG- 将 col 设置为 min-width: 992px 和向前。
• col-xl- 将 col 设置为min-width: 1200px和转发。

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

希望这有帮助。