html - Angular - 显示占据整个屏幕的图像网格

Question

我有一个带引导程序的 Angular SPA。在那里我有一个概述页面，其中显示了“活动”列表，并且正在努力解决如何在桌面上实现设计。

广告系列有我想要显示的背景图像（它们也有我想要显示的名称，但为了简化起见，我们暂时将其排除在外）。我正在尝试构建一个反应式桌面设计，将屏幕正确分割成正方形，每个活动一个，并包含活动的背景图像。桌面设计应该利用 100% 的屏幕空间。

我对桌面设计的要求是

• 没有可用空间应该是可见的，100% 的屏幕空间应该被背景图像占用以点击。
• 一行广告系列最多应包含 3 个条目
• 一页广告系列最多应包含 3 行
• 如果一行包含的条目数少于最大条目数，则其余条目应扩大宽度以利用可用空间
• 如果一个页面包含的行数少于最大行数，则其他行应该在高度上扩展以利用可用空间
• 如果鼠标悬停在图像上，它应该会亮起

我能够创建这样的网格，但不是我想要的。要显示活动的背景图像，我可以：

1. 使用<img src="{{campaign.backgroundImage}}">标签，或
2. 像这样设置周围 div 的背景图像<div [style.background-image]="'url('+campaign.backgroundImage+')"></div>。

如果我这样做 1)，无论我尝试什么，图像都不能很好地与我的网格系统配合使用。它们以某种方式导致列的扩展，导致行的高度不相等，并且行中的列不相等。在此堆栈闪电战中对此进行了演示

如果我这样做 2）我看不到如何在悬停时产生突出显示效果。

我该如何正确解决这个问题？

//The HTML for solution based on 1)
<div class="container d-flex flex-column">
  <div class="row h-100" *ngFor="let dataRow of processedData">
    <div class="col-sm" *ngFor="let dataPoint of dataRow">
      <img src="{{dataPoint}}" alt="an image">
    </div>
  </div>
</div>

标签： htmlcssangularbootstrap-4css-grid