ngx-masonry中设置图片百分比宽度不生效该如何解决？

ngx-masonry本身支持百分比宽度设置，你遇到的布局失效问题可通过以下步骤修复：

1. 修正核心语法错误 #

你的宽度绑定语法存在问题，[style.width.%]="[item.width]"多了一层方括号，会将数值包装为数组导致样式绑定失效，直接改为[style.width.%]="item.width"即可。

2. 补充必要样式配置 #

给容器和item添加基础样式，避免盒模型计算偏差导致换行：

/* 强制masonry容器占满父级宽度 */
ngx-masonry {
  width: 100%;
}
/* 避免内边距、边框撑大item宽度 */
.masonry-item {
  box-sizing: border-box;
  margin-bottom: 10px; /* 可自定义纵向间距 */
}

3. 调整Masonry配置项 #

关闭自动宽度适配，强制按照容器宽度做布局计算：

public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 10,
    resize: true,
    fitWidth: false, // 关闭容器宽度自动收缩
    columnWidth: '.masonry-item' // 以item宽度为基准计算列数，可选配置
};

4. 额外注意事项 #

• 若设置了gutter间距，需要确保同一行所有item的百分比宽度之和加上gutter总宽度不超过100%，否则会触发自动换行
• 异步加载图片的场景下，建议给图片设置固定宽高比，或者在图片加载完成后调用masonry的reloadItems()、layout()方法重排布局，避免图片加载后撑开容器导致布局错乱

内容的提问来源于stack exchange，提问作者Sadique Here