I made a customized image view with a ratio of 1:3. This view works well in most situations, but on short vertical phones such as the iPhone se, it goes over the navigation bar. So I try to reduce the image to a small size when the length of the phone exceeds a certain percentage of the length of the phone, but I don’t know what to do.
var body: some View {
NavigationView() {
GeometryReader { g in
ZStack {
BackgroundImage("1", width: g.size.width - 40, height: g.size.width * 1.3)
Text("명언")
.font(.largeTitle).bold()
.foregroundColor(.white)
}
.position(x: g.frame(in: .local).midX, y: g.frame(in: .local).midY)
.padding(.top, 35)
.navigationTitle("Today's")
.navigationBarTitleDisplayMode(.large)
}
.edgesIgnoringSafeArea(.top)
}
}
}
1
First of all,
width - 40: width * 1.3
is not the 1:3 aspect ratio. It’s nearly 1:1.3, which is 3:4 – that’s your actual ratio. Have you tried using.aspectRatio()
modifier? Also, having aspect ratio 3:4 is too much for some screens – iPhone SE screen width is 320, you set image width to 280, which means that the image height would be 320 * 1.3 = 416, the available space for your image on iPhone SE is 480 – 57 (tab bar height) – 116 (nav bar with large title) = 307. If you use.aspecRatio()
modifier, you won’t have to provide computed values of width and height.