SwiftUI中Image组件缩放显示异常问题求助

你的问题核心在于固定的Frame宽高比和图片本身的宽高不匹配，导致.aspectRatio(.fit)模式下图片无法填满屏幕宽度，左右出现空白，后续的scaleEffect只是缩放这个带空白的区域，自然会显得违和。检测图片适配宽度不是唯一解决方法，这里提供几种更直接的方案：

方案一：移除固定高度，让图片自适应宽度 #

这是最简单的解决方式，去掉frame的固定高度约束，让图片根据自身宽高比自动适配屏幕宽度，确保.fit模式下图片能完全占满宽度，消除左右间隙：

struct FancyViewer: View {
    private let imageName = "dragon"
    private let animDuration = 5.0
    @State private var imageScale: CGFloat = 1.0

    var body: some View {
        GeometryReader { proxy in
            VStack {
                Spacer()
                Image(imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: proxy.size.width) // 仅限制最大宽度，高度自适应
                    .scaleEffect(imageScale)
                    .animation(.linear(duration: animDuration), value: imageScale)
                    .clipped()
                Spacer()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Image(imageName)
                .resizable()
                .scaledToFill()
                .foregroundStyle(.thinMaterial)
                .overlay {
                    Color.clear
                        .background(.ultraThinMaterial)
                }
                .ignoresSafeArea()
        }
        .onAppear {
            imageScale = CGFloat.random(in: 1.0...1.3)
        }
    }
}

方案二：匹配Frame与图片的宽高比（需提前获取图片尺寸） #

如果必须保留固定的显示区域高度，可以先获取图片的实际宽高比，动态计算Frame的宽度或高度，确保图片在.fit模式下能填满宽度：

struct FancyViewer: View {
    private let imageName = "dragon"
    private let animDuration = 5.0
    @State private var imageScale: CGFloat = 1.0

    // 获取图片实际尺寸
    private func getImageSize() -> CGSize? {
        guard let image = UIImage(named: imageName) else { return nil }
        return image.size
    }

    var body: some View {
        GeometryReader { proxy in
            VStack {
                Spacer()
                if let imageSize = getImageSize() {
                    let imageRatio = imageSize.width / imageSize.height
                    // 根据屏幕宽度计算匹配的高度，保证图片填满宽度
                    let targetHeight = proxy.size.width / imageRatio
                    Image(imageName)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: proxy.size.width, height: targetHeight)
                        .scaleEffect(imageScale)
                        .animation(.linear(duration: animDuration), value: imageScale)
                        .clipped()
                }
                Spacer()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Image(imageName)
                .resizable()
                .scaledToFill()
                .foregroundStyle(.thinMaterial)
                .overlay {
                    Color.clear
                        .background(.ultraThinMaterial)
                }
                .ignoresSafeArea()
        }
        .onAppear {
            imageScale = CGFloat.random(in: 1.0...1.3)
        }
    }
}

方案三：使用.scaledToFill()替代.fit（需裁剪） #

如果允许裁剪图片的上下部分，可以用.scaledToFill()配合.clipped()，强制图片填满指定宽度，这样缩放后也不会有左右间隙：

Image(imageName)
    .resizable()
    .scaledToFill() // 强制填满宽度，超出高度部分裁剪
    .frame(width: proxy.size.width, height: proxy.size.width * 1.5)
    .scaleEffect(imageScale)
    .animation(.linear(duration: animDuration), value: imageScale)
    .clipped()

总结 #

检测图片适配宽度是可行方案，但并非唯一选择。优先推荐方案一，它无需额外计算，直接通过调整Frame约束让图片自然填满屏幕宽度，完美解决缩放时的间隙问题。

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