css - 如何在bootstrap css和angular 7中适合像facebook这样的图像集

问题描述

我想适合在新闻源中显示的 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;
   }
}

这是此代码的屏幕截图

这是我所期待的截图

请任何人知道如何做到这一点，请帮助我。我在这个问题上浪费了几天时间。

标签： cssangular7

css - 如何在bootstrap css和angular 7中适合像facebook这样的图像集

问题描述

解决方案

推荐阅读