带有 Web 组件图像的图像网格布局答案

【问题标题】：Image grid layout with web component images带有 Web 组件图像的图像网格布局
【发布时间】：2019-12-28 11:50:13
【问题描述】：

我的目标是为一组图像实现这种布局：

如您所见，一个简单的 2 列方形图像网格 - 这在 Bootstrap 环境中非常容易，其中一个指定 2 个列或每个大小 6，然后只需将图像的 CSS object-fit 设置为覆盖以避免拉伸并将高度设置为自动。

问题是，我试图在 Ionic 4 中实现这一点，其中 img 元素是一个 Web 组件，只有某些属性可以自定义。到目前为止，我可以让图像以 2 列的方式显示，但宽高比关闭。（我也必须使用元素，所以不能简单地使用 HTML5 img 元素）。

这是我目前所拥有的：

    <ion-grid>
        <ion-row>
            <ion-col size="6" *ngFor="let image of selectedImageURIs">
                <ion-img [src]="image"></ion-img>
            </ion-col>
        </ion-row>
    </ion-grid>

注意：Ionic 框架有自己的“Bootstrap”框架，称为 ion-grid。我最终得到的是：

我知道需要使它们的高度相同，并且设置对象适合覆盖，但是我如何使用 ion-img 来做到这一点？ I 是一个 Web 组件，因此 Shadow Dom 发挥了作用。文档只提到了"The component uses Intersection Observer internally"。那能做我需要的吗？我是 Web 组件的新手，试图了解我所缺少的内容。

【问题讨论】：

标签： ionic-framework ionic4 web-component shadow-dom

【解决方案1】：

这是我用于 Ionic 4 应用程序的解决方案。我使用 css 来完成您想要的外观。您的模板将如下所示，并使用ion-img 来利用延迟加载功能。

html

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let category of categories" size="6">
      <button #categoryButton type="button" (click)="selectCategory(categoryButton, category)" class="category-button">
        <ion-card padding class="category-card">
          <ion-card-content class="category-card-content">
            <ion-img *ngIf="!imageNotLoaded; else loadingCategory" src="{{category.icon_image}}" class="category-icon" (ionError)="imageNotLoaded = true"></ion-img>
            <ng-template #loadingCategory>
              <ion-skeleton-text animated style="height: 70px;width: 70px"></ion-skeleton-text>
            </ng-template>
          </ion-card-content>
          <ion-card-title class="category-title">{{category.name}}</ion-card-title>
        </ion-card>
      </button>
    </ion-col>
  </ion-row>
</ion-grid>

像这样设置你的 sass 代码。

scss

ion-col {
  text-align: center;
}

.active {
  .category-card {
    border-color: var(--ion-color-primary)!important;
    box-shadow: 0 4px 16px var(--ion-color-primary)!important;
  }
}

.category-button {
  padding: 4px;
  background: transparent;
  .category-card {
    min-width: 100%;
    margin: 0;
    border: 2px solid;
    .category-card-content {
      text-align: center;
      .category-icon {
        width: available;
      }
    }
    .category-title {
      font-size: x-small;
      font-weight: bolder;
    }
  }
}

这会产生如下图所示的最终结果。

注意：这是所有组件级别的代码，否则您需要使用 ::ng-deep 来绕过您的 css 代码的影子 dom。

【讨论】：

【解决方案2】：

page.html

<ion-row class="row-card">
  <ion-col size="6" class="col-card">
    <ion-card class="card-service">
      <img src="../../assets/images/services/w-medical.png" class="img-service" />
    </ion-card>
  </ion-col>
  <ion-col size="6" class="col-card">
    <ion-card class="card-service">
      <img src="../../assets/images/services/w-professional.png" class="img-service" />
    </ion-card>
  </ion-col>
</ion-row>

page.css

.row-card{
    padding: 0px 5px 0px 5px;

    .col-card{
        padding: 0px;

        .card-service{
            margin: 5px;
            height: 160px;
            border-radius: 0px;
            padding: 8px;
            box-shadow: 0px 0px;

            .img-service{
                height: 100%;
                width: 100%;
                object-fit: cover;
                margin: 0 auto;
                border: 0 solid #024f9a;
                background: linear-gradient(#0486ca,#024f9a);
                border-radius: 50%;
                padding: 15px;
                font-weight: bold;
                }    
        }
    }
}

【讨论】：

【解决方案3】：

Here is working one

ion-grid >
      <ion-row>
        <ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">
        <img src=''/>
          <!-- <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div> -->
        </ion-col>
      </ion-row>
    </ion-grid>

【讨论】：