SwiftUI中如何限制异步加载图片尺寸（不拉伸小图）

需要在SwiftUI视图中展示异步加载的图片，这些图片尺寸差异极大（小至20x20，大到2000+像素）。当前使用以下代码可让大图适配视图，但会同时拉伸小图：

AsyncImage(
    url: image.thumb,
    content: { image in
        image.resizable()
            .aspectRatio(contentMode: .fit)
    },
    placeholder: {
        ProgressView()
    }
)

想要实现图片显示原尺寸，若超过视图则适配的效果（类似CSS的img { maxWidth: 100%; height: auto; }）。

解决方案 #

核心是避免强制让图片可拉伸，改用容器约束结合等比缩放来实现需求，修改后的代码如下：

AsyncImage(url: image.thumb) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let image):
        image
            .scaledToFit()
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    case .failure:
        Image(systemName: "photo.badge.exclamationmark") // 可选：加载失败占位图
    @unknown default:
        EmptyView()
    }
}

代码说明 #

• 移除resizable()：避免强制拉伸小图，保留图片原始尺寸的显示可能
• scaledToFit()：等效于CSS的object-fit: contain，图片尺寸超过容器时会等比缩放，确保完整显示且不超出边界
• frame(maxWidth: .infinity, maxHeight: .infinity)：让图片容器占满可用空间，但仅当图片尺寸超过容器时才触发缩放，小图会保持原尺寸居中展示

如果需要更精准控制最大显示宽度（比如严格匹配父视图宽度），可以结合GeometryReader获取父视图尺寸：

GeometryReader { geo in
    AsyncImage(url: image.thumb) { phase in
        switch phase {
        case .empty:
            ProgressView()
        case .success(let image):
            image
                .scaledToFit()
                .frame(maxWidth: geo.size.width, alignment: .center)
        case .failure:
            Image(systemName: "photo.badge.exclamationmark")
        @unknown default:
            EmptyView()
        }
    }
}

这样就能完全实现类似CSS中max-width:100%; height:auto的效果。

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