Как разместить изображения, заданные как facebook в bootstrap css & angular 7

Question

Я хочу, чтобы в новостной ленте отображались изображения, например фотоальбомы на Facebook.

Когда я пытаюсь это показать, это показывает с огромными пробелами. вот мой код

HTML-код

<div class="pCollection">
        <div class="row pCollection-header">
            <div *ngFor="let photo of getPhotos(); let i=index" class="col-md-6">
                <div *ngIf="photos.length > 4">
                    <div  *ngIf="i != 3">
                            <div class="card">
                                    <div class="card-img-wrapper">
                                        <img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
                                         <div class="overlay">
                                            <p *ngIf="i == 3" class="restImages"> + {{photos.length - 4}}</p>
                                         </div>
                                    </div>
                                </div> 
                    </div>
                    <div  *ngIf="i == 3">
                            <div class="card">
                                    <div class="card-img-wrapper">
                                        <img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
                                         <div class="overlay">
                                            <p class="restImages"> + {{photos.length - 4}}</p>
                                         </div>
                                    </div>
                                </div>
                    </div>

                </div>
                <div *ngIf="photos.length < 5">
                    <div class="card">
                        <div class="card-img-wrapper">
                            <img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">

                        </div>
                    </div>
                </div>
            </div> 
        </div></div>

это мой код CSS

.pCollection-header .col-md-6 {
    padding-left: 0;  
    padding-right:0;  
}


.pCollection {
   overflow: hidden;
}  

.card{
   cursor: pointer;
}

.card-img-wrapper   {
position: relative;
/* background: rgba(0, 0, 0, 0.7); */
}
.card-img-wrapper img{
   background: rgba(0, 0, 0, 0.7);
}
.overlay{
   position: absolute;
   top: 35%;
   left: 36%;
   z-index: 1000;

}

.restImages   {


   color: #fff;
   font-size: 35px;
   }

@media (min-width: 576px) {
   .restImages {
       font-size: 24px;
   }
 }


@media (min-width: 768px) { 
   .restImages {
       font-size: 24px;
   }
}
@media (min-width: 992px) { 
   .restImages {
       font-size: 35px;
   }
 }


@media (min-width: 1200px) { 
   .restImages {
       font-size: 35px;
   }
}

это скриншот для этого кода

это скриншот того, что я ожидаю

пожалуйста, кто-нибудь знает, как это сделать, пожалуйста, помогите мне. Я потратил несколько дней на эту проблему.

Answer 1

Попробуйте этот CSS для stackblitz , который вы создали ...

p {
  font-family: Lato;
}

.paddingReset>div{
  padding:0;
}

.img-responsive-custom{
  max-width: 100%; 
  display:block; 
  height: auto;
}

.left-set>img{
  border-right:2px;
  border-bottom: 0px;
  border-left:2px;
  border-style: solid;
  border-color: #fff;
}

.right-set>img{
border-top:1px;
border-right:2px;
border-left:2px;
border-style: solid;
  border-color: #fff;
}

.column9Custom{width:75%;}
.column3Custom{width:25%;}

Answer 2

Вы можете использовать jQuery плагин для этого, если хотите. Вы можете увидеть демо это именно то, что вы хотите.