Поместите одно изображение под другим в ng для списка Angular

Question

У меня есть список элементов (изображений), который выглядит как сетка 4x4 (длина массива 16, поэтому у меня 16 изображений).

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
  </li>
</ul>

Вот мой CSS:

ul { padding:0; width:780px; margin:20px auto}
li { display:inline;}
.tn{
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
  width: 191px;
  height: 146px;

}

И сейчас у меня есть это представление:

Далее я хотел бы разместить другие изображения (еще одна Сетка - Сетка 2), каждый элемент из которыхбудет полностью покрывать каждое изображение из первой сетки.

Я нашел это решение http://jsfiddle.net/uS7nw/2/, которое мне нужно, но я не могу реализовать его прямо в Angular - я много играл с CSS,но каждый раз это не работает.

Итак, по сути, это должно выглядеть так:

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
    <img  [src]="img2" class="secondImg">
  </li>
</ul>

Не могли бы вы помочь мне настроить CSS?PS.Мне не нужно динамическое условное связывание, например <img [src]="option == true? img : img2">, но мне нужно ровно 2 изображения, одно поверх другого

Answer 1

Должно работать следующее:

ul { padding:0; width:780px; margin:20px auto}
li { 
  display:inline-block;
  position: relative;
}

li, li img {
  width: 191px;
  height: 146px;
}

.tn, .secondImg {
  position: absolute;
  margin:2px 2px;
  box-shadow:#999 1px 1px 3px 1px;
  cursor: pointer;
}

Изображения располагаются абсолютно внутри li, поэтому они располагаются друг над другом.

Здесь вы можете увидеть StackBlitz:https://stackblitz.com/edit/angular-dykmxm?file=src%2Fapp%2Fapp.component.css

Вы можете добавить свойство z-index либо к .tn, либо к .secondImage, если хотите контролировать, какое из них находится сверху

Answer 2

Во-первых, ваш угловой код должен выглядеть следующим образом:

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="key" class="tn">
  </li>
</ul>

Не так:

<ul id="thumbnailsList">
  <li *ngFor="let key of array" >
    <img  [src]="img" class="tn">
  </li>
</ul>

Если вам нужны два изображения, один верх другого, вы можете использовать шаблон начальной загрузки

class row
      Class col-md-12
      class col-md-12