이오닉 - 사진 갤러리의 동적 열

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- 세트처럼 그리드 COLS에 중단 점을 설정할 수 있습니다 앞으로 min-width: 0px 및 위해 내지 컬럼.
• 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에 동일한 번호가 설정됩니다. 큰 화면에서 이미지가 깨지는 경우 md 이상이 표시 될 때 더 적은 수의 열을 설정할 수 있다면 문제가 더 잘되는지 확인하십시오.

희망이 도움이됩니다.