图像保持其长宽比，但其框没有

Question

在以下代码中，我做了一些实验，请注意，我为渐变做了一些自定义扩展（此处未显示），但是它们并不重要，您可以忽略它们。

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    
    // body
    var body: some View {
        
        // background image
        let image = Image("some_image"))
            .resizable()
            .scaledToFit()
            .frame(maxWidth: 300)
        
        // image mask
        let imageMask = Image(systemName: "heart.fill")
            .resizable().scaledToFit().frame(width: 100).opacity(0.8)
        
        // text mask
        let textMask = Text("SwiftUI is Awesome!")
            .font(.title).fontWeight(.bold)
        
        return HStack {
            VStack {
                
                // my custom extension (not important)
                Gradient.vertical  (.red  , .orange)
                Gradient.horizontal(.green, .blue  )
                Gradient.diagonal  (.pink , .purple)
                
                image
                    .overlay(imageMask.border(Color.blue), alignment: .topLeading)
                    .border(Color.green)
                
                image.mask(imageMask)
                
            }.border(Color.blue)
        }
    }
    
}

PlaygroundPage.current.setLiveView(ContentView())

结果是：

我的问题是：为什么图像保持其长宽比，而不保持其边框（绿色边框）？

Answer 1

scaledToFit()强制图像在保留在父视图（在本例中为框架）内时保持其纵横比。

但是，框架将尝试尽可能扩展，即300，这比缩小图像的宽度还要大。

您可以通过设置maxHeight: 100

来进一步观察