响应式图片库

Question

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

我的问题是，当我缩小屏幕尺寸时，图像会缩小尺寸 ("zoom")，而不是减少每行的图像数量。

如果我有 5 张图像，当缩小屏幕时，我会根据缩小情况有 4、3、2 或 1，此时不会发生这种情况:(

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

谢谢！

我的代码

<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 检查屏幕宽度并计算要显示的列数并动态更新视图

响应式图片库

Responsive Image Gallery

html

css

imagelist

masonry

angular