如何在Manifest项目中保持图片原始宽高比

在Manifest项目中处理图片上传时，开发者经常会遇到图片被自动裁剪的问题。本文将详细介绍如何通过配置来保持图片的原始宽高比，避免不必要的裁剪。

默认行为分析

Manifest的image类型属性默认会对上传的图片进行裁剪处理：

• 缩略图(thumbnail)默认尺寸为80x80像素
• 中等尺寸(medium)默认尺寸为160x160像素

这种默认行为会导致所有上传的图片被强制调整为固定尺寸，破坏了原始图片的宽高比，可能导致图片内容被裁剪或变形。

解决方案

方法一：仅指定宽度

最简单的解决方案是只配置宽度参数，让高度根据原始比例自动计算：

entities:
  Post:
    properties:
      - {
          name: photo,
          type: image,
          options: {
            sizes: {
              small: { width: 500 },
              large: { width: 1000 }
            }
          }
        }

这种配置会：

1. 生成宽度为500px的小图，高度按比例缩放
2. 生成宽度为1000px的大图，高度按比例缩放
3. 完全保留原始图片的宽高比

方法二：使用fit参数

Manifest提供了更精细的控制方式，通过fit参数可以指定图片的缩放模式：

entities:
  Post:
    properties:
      - {
          name: photo,
          type: image,
          options: {
            sizes: {
              small: { width: 500, fit: 'contain' },
              large: { width: 1000, fit: 'contain' }
            }
          }
        }

fit参数支持多种模式：

• contain：保持宽高比，确保整个图片可见，可能会留有空白
• cover：保持宽高比，填充整个区域，可能会裁剪部分内容
• fill：拉伸图片以完全填充区域，不保持宽高比
• inside：保持宽高比，将图片调整到适合指定尺寸的最大可能大小
• outside：保持宽高比，将图片调整到至少覆盖指定尺寸的最小可能大小

最佳实践建议

1. 优先使用contain模式：这是保持图片完整性和比例的最佳选择
2. 考虑响应式设计：为不同设备配置多个尺寸版本
3. 合理设置最大尺寸：避免生成过大的图片影响性能
4. 保持一致性：在整个项目中采用统一的图片处理策略

通过合理配置Manifest的image类型属性，开发者可以轻松实现既美观又保持原始比例的图片处理方案。