objectFit

ImageFit

ImageFit.contain

• 效果：保持图片的宽高比，让图片完整显示在容器内，不会裁剪。

• 特点：图片会按比例缩小 / 放大，直到刚好有一边触碰到容器边界，另一边留白。

• 场景：需要完整显示图片、不裁剪内容时使用。

ImageFit.cover

• 效果：保持图片的宽高比，让图片完全覆盖容器，超出部分会被裁剪。

• 特点：图片会按比例放大 / 缩小，直到容器的每一边都被图片填满，多余部分从中心裁剪。

• 场景：头像、背景图、Banner 等需要填满容器且允许裁剪的场景。

ImageFit.auto

• 效果：根据图片自身的方向（横向 / 纵向）自动选择适配方式。

  • 图片宽 > 高 → 表现类似 contain

  • 图片高 > 宽 → 表现类似 cover

• 特点：自动适配，无需手动判断图片方向。

• 场景：不确定图片比例，又想保证基本适配效果时使用。

ImageFit.fill

• 效果：完全拉伸图片，填满容器，不保持宽高比。

• 特点：图片会直接变形，强制匹配容器的宽高，可能出现拉伸失真。

• 场景：不介意图片变形，只需要填满容器的场景（极少用）。

ImageFit.scaleDown

• 效果：和 contain 类似，但只缩小不放大。

• 特点：如果图片尺寸比容器大，会缩小到适配容器；如果图片比容器小，则保持原大小，不会放大。

• 场景：防止小图片被放大模糊，又不想裁剪内容时使用。

ImageFit.none

• 效果：不做任何缩放，保持图片原始尺寸，居中显示在容器中。

• 特点：图片超出容器会被裁剪，小于容器则居中留白。

• 场景：需要保留图片原始像素尺寸时使用（比如像素图、图标）。

总结