响应式图库

Question

我使用material / image-list / mdc-image-list库开发了砌体风格的图片库。

我的问题是，当我减小屏幕尺寸时，图像会减小其尺寸（“缩放”），而不是减少每行图像的数量。

如果我有5张图像，在缩小屏幕时，根据缩小比例，我将有4、3、2或1，这时不会发生：（

有人知道为什么会这样吗？我该如何解决？

谢谢！

我的代码

Stackblitz

<ul class="mdc-image-list mdc-image-list--masonry masonry-image-list">
  <li class="mdc-image-list__item"
      *ngFor="let image of list">
   <img class="mdc-image-list__image"
        [src]="image">
  </li>
</ul>

问题

正如您在图像中看到的那样，我缩小了查看屏幕，图像减小了缩放比例……目标是它们不会减小尺寸，而是减少每行显示的数量。

Answer 1

您需要做的是将列设置为dynamic to screen size，现在您正在执行此操作

.masonry-image-list {
  @include mdc-image-list-masonry-columns(3);

  &__item { background-color: #ccc; }
}

这意味着您要说的是无论屏幕大小显示3列

您可以通过多种方法执行此操作，将最大列数提高为6列，然后使用媒体查询来调整屏幕数较小的列数

.masonry-image-list {
  @includes mdc-image-list-masonry-columns(6);
  @media screen and (max-width:1020px) {
    @includes mdc-image-list-masonry-columns(5);
  }
  @media screen and (max-width:960px) {
    @includes mdc-image-list-masonry-columns(4);
  }
  ...
}

此处stackblitz是此工作的基本示例。

这可能是最简单的选择，但不是最有效的选择，您可以使用CSS网格自动调整列，但是由于您使用的是angular/material并不是真正的选择。

如果您想要更动态的解决方案，则还可以使用javascript检查屏幕宽度并计算要显示和动态更新视图的列数