Question

我想创建一个与Angular 6 *ngFor指令一起动态工作的网格列表。我的问题是在firebase中有105个对象的数组。对象的结构如下：

{src: 'some url', alt: 'title'}

现在我有2种不同类型的照片，一幅是水平的，一幅是垂直的。我想创建自动填充部分来填充空白空间，我知道可以使用css3中的网格列表来完成。但是如何与：

连接

<div class="row">
<div class="imageGallery1 " *ngFor="let image of galleryList">
  <a  [href]="image.src" [title]="image.alt">
    <img [src]="image.src" [alt]="image.alt" style="max-width: 300px; max-height: 300px; object-fit: contain; padding-right: 20px;" />
  </a>

</div>

样式仅用于创建临时缩略图

是否可以检查每张照片的类型？（垂直，水平），然后自动将它们分类？请指出是否还有其他方法

Answer 1

我在Grid CSS的youtube课程上找到了解决方案。

https://www.youtube.com/watch?v=t6CBKf8K_Ac

css：

.row {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
}
.imageGallery1 {
  text-align: center;
  position: relative;

  & img {
    width: 100%;
    max-height: 510px;
    height: 251px;

  }
}

.vertical {
  grid-row: span 2;
  & img {
    height: 510px;
  }

}

现在每张垂直照片都有自己的类别，grid-row: span 2;

也许我可以帮助某人

CSS-照片的自动网格列表（角度6）

1 个答案: