0

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:

enter image description here

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!

enter image description here

Fernando Ivan Perez Ruiz
  • 93
  • 8
  • 1
    Hello! I've measured images in the screenshots you've posted and the original image seems to have aspect ratio of roughly 3/4, whole the space you want to put it to sees to have aspect ratio of 4/3. I understand that you want the image to cover all the width of the container, and have the height of 300, but not be visible outside the 300 points high frame. In that case, use `.aspectRatio(contentMode: .fill).clipped()`. – Baglan Jun 01 '23 at 03:34
  • Oh! I did add the .clipped() modifier to the AsyncImage instead of the image itself and it seemed to work! Thanks a lot! – Fernando Ivan Perez Ruiz Jun 01 '23 at 04:38

0 Answers0