Can we set image width by percentage in ngx-masonry

Question

When I'm trying add width by percentage, it's not working. It's showing like image per row.

Is there any way to fix the issue ?

Here is my HTML Code:

<ngx-masonry [options]="options" [ordered]="true">
      <div ngxMasonryItem class="masonry-item" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
        <a class="" href="/assets/images/gallery/{{item.image}}" data-fancybox="gallery">
          <img src="/assets/images/gallery/{{item.image}}" class="img-fluid" alt="">
        </a>
      </div>
</ngx-masonry>

Ts Code:

public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 10,
    resize: true,
};

public gallery = [
  {
    'image' : 'image1.jpg',
    'width' : '50%'
  },
 {
    'image' : 'image2.jpg',
    'width' : '25%'
  },
 {
    'image' : 'image3.jpg',
    'width' : '25%'
  },
 {
    'image' : 'image4.jpg',
    'width' : '50%'
  },
 {
    'image' : 'image5.jpg',
    'width' : '50%'
  }
]

Update ..............

I have updated my code to,

Ts

public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 0,
    resize: true,
  };

  public gallery = [
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 50,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    
  ]

HTML

<ngx-masonry [options]="options" [ordered]="true">
            <div ngxMasonryItem class="masonry-item ratio ratio-1x1" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
                <img src="{{ item.image }}" style="width: 100%;">
            </div>
</ngx-masonry>

It's not working properly ..........................................................................

Thanks.

Tino · Answer 1 · 2021-06-16T14:48:01.477

You should convert the "width" property to a string, e.g.

'width' : '50%'

Short explanation:

Without a unit (e.g. % or rem) the value is interpreted as pixel based value and it is ok to use a number type for it. But when you want to set the unit behind the value (in this case %) you have to write it as string type.

EDIT

I missed the point that you already set the width as percantage value with [style.width.%]="[item.width]". In this case the value for width is fine with just as a number without any unit.

I tried it out and it worked fine, even without percentPostition option.

TS code:

import { Component } from '@angular/core'
import { NgxMasonryOptions } from 'ngx-masonry'

@Component({
  selector: 'app-masonry',
  templateUrl: './app-masonry.component.html',
})
export class AppMasonryComponent {

  public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 0,
    resize: true,
  }

  public gallery = [
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 50,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
  ]
}

HTML code (I additionally used ratio helper class from bootstrap to make the images square):

<ngx-masonry [options]="options" [ordered]="true">
    <div ngxMasonryItem class="masonry-item ratio ratio-1x1" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
        <img src="{{ item.image }}">
    </div>
</ngx-masonry>

Result:

Thanks for your answer. I have updated the code, still facing same issue. — Sadique Here, Jun 16 '21 at 13:03
Did you set the [percentPosition option](https://masonry.desandro.com/options.html#percentposition) to `true` ? — Tino, Jun 16 '21 at 13:50
How can use percentPosition, could you please share a example? — Sadique Here, Jun 16 '21 at 14:46
I just edited the answer, works fine this way, even without `percentPosition: true` — Tino, Jun 16 '21 at 14:48
Here is the documentation for the bootstrap [ratio helper class](https://getbootstrap.com/docs/5.0/helpers/ratio/#aspect-ratios) if needed. — Tino, Jun 16 '21 at 14:53
Hi bro, I have tried your code, i just edited the code, but it's not working properly. and i have updated my question. — Sadique Here, Jun 17 '21 at 04:48

Can we set image width by percentage in ngx-masonry

1 Answers1