Angular：调整ngFor遍历图片大小并保持比例及布局的CSS方案

可以通过纯CSS实现需求，无需JS计算图片尺寸，核心利用Flex布局配合图片比例缩放规则，达到类似示例的效果：

1. 容器（外层div）样式 #

给包裹图片的div设置Flex布局，控制图片行的排列逻辑：

.image-row-container {
  display: flex;
  gap: 8px; /* 可选：设置图片间的间距 */
  overflow-x: auto; /* 可选：图片过多时开启横向滚动 */
  align-items: center; /* 让所有图片垂直居中对齐 */
}

2. 图片样式 #

通过固定高度（或最大高度）让图片自动按原始比例缩放宽度，同时保证比例不变：

.preview-image-small {
  height: 100px; /* 统一设置图片高度，可根据需求调整数值 */
  /* 若需限制最大高度而非固定高度，可替换为：max-height: 100px; */
  object-fit: contain; /* 确保图片完整显示，不拉伸变形 */
}

修改后的Angular模板 #

<div class="image-row-container">    
  <img class="preview-image-small" *ngFor="let unit of array" [src]="getAssetUrl(unit)">
</div>

补充说明 #

• 若希望统一图片宽度而非高度，只需把height替换为width，图片会自动按比例调整高度。
• object-fit: contain保证图片完整展示，不会被裁剪或拉伸；如果需要让图片填充指定区域（允许裁剪边缘），可改用object-fit: cover。
• 若要让图片行自适应容器宽度并自动换行，可给容器添加flex-wrap: wrap，同时调整图片的flex-shrink属性控制缩放优先级。

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