Can we set image width by percentage ?

[sadiquekp]

Hi, 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'
  }
]

Thanks.

[wynfred]

Hi, you should be able to use masonry with percentage width. I'm not sure what's wrong there but this may help.

https://masonry.desandro.com/options.html#columnwidth