SwiftUI 中的图像在尝试设置宽高比时在底部占用额外空间

Question

我想让图像占据其容器的整个宽度，并且高度将基于明确提供的宽高比。此外，图像应覆盖其所有框架，并且无论其内容被剪切，即如下图所示的

Aspect Fill

模式。

所需输出：

Aspect Fill

方式1

这是我的

View

：

struct AspectImage: View {
    var heightMultiplier: CGFloat
    var body: some View {
        GeometryReader { proxy in
            Image(.leapord)
                .resizable()
                .scaledToFill()
                .frame(width: proxy.size.width, height: proxy.size.width * heightMultiplier)
                .clipped()
                .border(color: .black, width: 5, radius: 22)
        }
    }
}

我的使用方式：

struct ImageAspectContainerView: View {
    var body: some View {
          VStack {
            Text("Hi")
            AspectImage(heightMultiplier: 0.3)
                .background(.gray)
            Text("Hello")
        }
    }
}

外观如何：

图像长宽比按预期工作，但图像在底部占用空间（屏幕截图中的灰色区域）。

方式2

我尝试过

.aspectRatio

修饰符，但它没有给出所需的输出：

struct AspectImage: View {
    var aspectRatio: CGFloat
    var body: some View {
        GeometryReader { proxy in
            Image(.leapord)
                .resizable()
                .scaledToFill()
                .frame(width: proxy.size.width)
                .aspectRatio(aspectRatio, contentMode: .fill)
                .border(color: .black, width: 5, radius: 22)
        }
    }
}

struct ImageAspectContainerView: View {
    var body: some View {
        VStack {
            Text("Hi")
            AspectImage(aspectRatio: 2/1) // Aspect ratio 2:1
                .background(.gray)
            Text("Hello")
        }
    }
}

外观如何：

从截图中可以看出，宽高比不起作用。我首先将宽度设置为完整的可用空间，然后使用

aspectRatio

设置宽高比，但它不起作用。

Answer 1

ViewThatFits

可用于根据纵横比在缩放至填充和缩放至适合之间进行选择：

• 当图像的纵横比高于屏幕时，它会缩放以填充
• 否则，当它的宽高比比屏幕宽时，它会缩放以适合屏幕。

ViewThatFits(in: .horizontal) {
    let theImage = Image(.leapord)
    theImage
        .resizable()
        .scaledToFill()
    theImage
        .resizable()
        .scaledToFit()
}
.clipShape(RoundedRectangle(cornerRadius: 22))
.overlay {
    RoundedRectangle(cornerRadius: 22)
        .stroke(.black, lineWidth: 5)
}