html - 响应式图片库

Question

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

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

如果我有 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 检查屏幕宽度并计算要显示的列数并动态更新 View