Here is the preview of my iPad app. How can I add padding to my image (the food image) both in potrait & landscape orientation in iPad? The padding works good in potrait mode, why it isn't work (top & bottom pading) in landscape orientation ?

This is my code

struct ContentView: View {
var body: some View {
    ZStack {
        Image("bg_home")
            .resizable()
            .scaledToFill()
            .opacity(0.3)
        GeometryReader {
            geo in
            HStack(alignment: .center) {
                Image("ketupat_home")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geo.size.width/2, height: geo.size.height * 0.95, alignment: .center)
                    .cornerRadius(30)
                    .padding()
                
                VStack {
                    Text("Lorem Impsum Title")
                        .fontWeight(.bold)
                        .font(.system(size: 64))
                        .multilineTextAlignment(.center)
                    .frame(maxWidth: .infinity, alignment: .center)
                    .padding(.leading, 10)
                    
                    Text("(Lorem Ipsum Sub Title)")
                        .fontWeight(.medium)
                        .font(.system(size: 32))
                        .multilineTextAlignment(.center)
                    .frame(maxWidth: .infinity, alignment: .center)
                    
                    Button {
                        print("Let's Go")
                    } label: {
                        Text("Let's Go")
                            .frame(width: geo.size.width/4, height: 75, alignment: .center)
                            .font(.system(size: 32))
                            .background(.orange)
                            .foregroundColor(.white)
                            .cornerRadius(100)
                            
                            
                    }
                    .padding()
                    .cornerRadius(10)
                    
                    Image(systemName: "speaker.slash.fill")
                        .resizable()
                        .frame(width: 40, height: 40, alignment: .center)
                        .padding()
                }
            }
            .padding(.all, 32)
            
        }
    }
}

}

CodePudding user response：

The padding is working fine. The reason you see no margin is the image overflowing its frame because it is too large and the modifier .aspectRatio(contentMode: .fill).

You can change that to .aspectRatio(contentMode: .fit)

But this will make the image smaller to fit its container. You can keep the original modifier and try .clipped() after the aspectRatio modifier.