Angular+Bootstrap实现占满全屏的活动图片响应式网格问题咨询

推荐优先选择背景图方案（也就是你尝试的方案2）实现，img标签自带的原生尺寸特性很容易打乱弹性布局的宽高比例，背景图可以更灵活地控制填充规则，适配你的网格需求，具体实现如下：

第一步：外层容器基础设置 #

先把页面根层级的容器高度设置为占满视口，避免默认边距产生多余空白：

/* 全局样式 */
html, body, app-root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免出现滚动条 */
}

第二步：修改HTML结构 #

调整你的原有结构，去掉冗余的Bootstrap类，改用自定义弹性布局规则，后续要加活动名称直接在campaign-card标签内插入即可：

<div class="campaign-grid-container">
  <div class="campaign-row" *ngFor="let dataRow of processedData">
    <div 
      class="campaign-card"
      [style.backgroundImage]="'url('+dataPoint+')'"
      *ngFor="let dataPoint of dataRow"
      (click)="你绑定的点击事件逻辑"
    >
    </div>
  </div>
</div>

注意你处理processedData的时候，确保每组分最多3个元素、总共最多分3组，就能对应单排最多3个、单页最多3行的要求。

第三步：添加布局和交互样式 #

.campaign-grid-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.campaign-row {
  /* 自动拉伸高度，行数不足3行时也能填满剩余空间 */
  flex: 1;
  display: flex;
  width: 100%;
}

.campaign-card {
  /* 自动拉伸宽度，同行列数不足3个时填满剩余空间 */
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 悬浮高亮效果，两种方案二选一即可 */
/* 方案1：调亮图片亮度 */
.campaign-card:hover {
  filter: brightness(1.2);
}

/* 方案2：叠加半透明白色遮罩 */
/*
.campaign-card:hover {
  position: relative;
}
.campaign-card:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.2);
}
*/

如果你一定要坚持使用img标签的方案1，只需要给img标签添加以下样式即可避免撑破容器：

.campaign-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

内容的提问来源于stack exchange，提问作者Philipp Doerner