Search code examples
htmlcssangularmasonryimagelist

Responsive Image Gallery

I developed a Masonry-style image gallery using the material / image-list / mdc-image-list library.

My problem is that when I reduce the screen size, the images will reduce their size ("zoom") instead of reducing the number of images per line.

If I have 5 images in line, when reducing the screen, I would have 4, 3, 2 or 1 depending on the reduction, at this time this does not happen :(

Does anyone know why this happens and how can I solve it?

Thanks!

My code

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>

Problem

Image

As you can see in the image, I reduced the viewing screen and the images decreased the zoom ... the goal is that they do not decrease their size but decrease the number displayed per line.

Solution

  • What you need to do is make your columns dynamic to screen size, right now you are doing this

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

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

    which means you are saying no matter the screen size show 3 columns

    You can do this a number of ways, make your max number of columns higher say 6 columns and then use media queries to adjust the number of columns as screensize is smaller

    .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);
  }
  ...
}

    Heres a stackblitz of a basic example of this working.

    This is probably the easiest option but not the most efficient, you could use css grid to automatically adjust the columns but since you are using angular/material not really an option.

    If you want a more dynamic solution you could also use javascript to check the screen width and calculate the number of columns to show and dynamically update the view