Angular Modal Gallery-位置图库图像

Question

我正在尝试实现图像模式，但是我遇到了一些问题。

我希望第一张图像填充整个大盒子（类下降），而其余图像在同一盒子下面，如图所示。

我已经尝试了一切，但是在图像数组中，我不能只显示一个，例如，仅显示第一个：（

有什么方法可以实现？

谢谢！

我的StackBlitz

Stackblitz Link

HTML

<div class="drop">
    <div class="abc">
    <!-- 1 Image here  -->
        <section>
            <ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes"></ks-modal-gallery>
        </section>
    </div>
</div>
<div class="row">
    <div class="Upcard">
    <!-- 2,3,4,5 Images here !!!  -->
    </div>
</div>

Component.ts

 imagesMixedSizes: Image[] = [
    new Image(0, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-135230.png',

    }),
    new Image(1, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-547115.jpeg'
    })]

图像问题/说明

Answer 1

也许您可以将变量分成两个。如果是这样的话。

像这里：https://stackblitz.com/edit/angular-a9kzot

或者如果您不想不必要地创建新变量，请对同一数组使用切片：

示例：

<ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes.slice(0,1)"></ks-modal-gallery>

<ks-modal-gallery [id]="4" [modalImages]="imagesMixedSizes.slice(1)"></ks-modal-gallery>