Блог

Я пытаюсь динамически отображать свои изображения в виде сетки из цикла ngFor, но они отображаются в виде списка. Есть ли лучший способ показать изображения внутри сетки?

Ссылка Css

Предварительный просмотр изображений

HTML

 <div class="gallery">
   <div class="gallery__item">
     <ng-container *ngFor="let img of imageData">
       <img
         src="https://localhost:44349/{{img.ImagePath}}"
         alt="Img">
     </ng-container>
  </div>
 

Обновить файл css

  /* Container Flex */
.gallery {
  display: grid;
  flex-wrap: wrap;
  /* Flex-wrap: quebrar a linha quando um item não puder mais compactar o seu conteúdo */
  padding: 20px 20px 0 20px;
  max-width: 499px;
}

/* Flex Item */
.gallery__item {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.gallery__item > img {
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: .25rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .75);
}

.gallery__item > img:hover {
  cursor: pointer;
}

/* Responsive */
@media only screen and (min-width: 500px) {
  .gallery {
    max-width: 100%;
    padding: 20px 20px 0 0;
    /* Agora sem padding-left */
  }

  .gallery__item {
    width: calc((100% / 3) - 20px);
    /* Agora que o container .gallery não possui
    mais padding-left, e os item ímpares serão os
    que ficaram na lateral esquerda, retiro 20px
    de cada item, e adiciono como margin-left
    nos ímpares abaixo */
  }

  .gallery__item:nth-child(odd) {
    margin-left: 20px;
    /* Cada item ímpar, terá uma
    margem esquerda de 20px */
  }
}

@media only screen and (min-width: 720px) {
  .gallery {
    max-width: 100%;
    padding: 20px 20px 0 0;
    /* Agora sem padding-left */
  }

  .gallery__item {
    width: calc((100% / 3) - 20px);
    /* Agora que o container .gallery não possui
    mais padding-left, e os item ímpares serão os
    que ficaram na lateral esquerda, retiro 20px
    de cada item, e adiciono como margin-left
    nos ímpares abaixo */
  }

  .gallery__item:nth-child(odd) {
    margin-left: 20px;
    /* Cada item ímpar, terá uma
    margem esquerda de 20px */
  }
}

@media (max-width: 500px) and (min-width: 0px) {
  .gallery {
    display: block;
    flex-wrap: wrap;
  }


  .gallery__item {
    width: 100%;
    margin-bottom: 20px;
    display: block!important;
  }
}
 

Приведенный ниже код изначально содержит 4 столбца, но при изменении размера браузера он будет отображаться соответствующим образом.

Игровая площадка

CSS:

 .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 0 4px;
}


.column {
  -ms-flex: 25%;
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


 

HTML:

 <div class="row">
  <div class="column">
    <img *ngFor="let img of imageArr"
[src]="img"
alt="Img" style="width:100%">
  </div>
  <div class="column">
    <img *ngFor="let img of imageArr"
[src]="img"
alt="Img" style="width:100%">
  </div>
</div>
 

тс

 import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  imageArr = [
    'https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg',
    'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg'
  ];
}

 

Выход