How to properly center and set aspect ratio for an image in SwiftUI?

Question

I've been trying like a million different ways in terms of modifier order but I just don't seem to get the centering of the image correct, this is what my struct looks like

struct RecipeDetailView: View {

let recipe: Recipe

var body: some View {
    ScrollView {
        AsyncImage(url: URL(string: recipe.imageURL)) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Image(systemName: "photo")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 40,
                    height: 40,
                    alignment: .center)
                .foregroundColor(.white.opacity(0.7))
                .frame(
                    maxWidth: .infinity,
                    maxHeight: .infinity)
        }
        .frame(height: 300)
        .background(LinearGradient(
            gradient:
                Gradient(colors: [Color.gray.opacity(0.3), Color.gray]),
            startPoint: .top, endPoint: .bottom))
        
        VStack(spacing: 30) {
            Text(recipe.name)
        }
    }
    .ignoresSafeArea(.container, edges: .top)
    }
}

And this is what the image looks like:

And whenever I changed .aspectRatio(contentMode: .fill) it just looks awful and it sure does not respect the 300 frame height specified. Can you guys please help me out? I would really appreciate it! Thanks in advance!