I want to maintain a 1/1 square aspect ratio (equal width and height) without specifying an exact height/width. This is proving unreasonably hard. My code is below.
Image(.personsmiling)
.resizable()
.aspectRatio(1/1, contentMode: .fill)
.padding()
Previously I have used scaledToFill() and clipped() but that approach doesn't work here
I managed to work out a solution. It is crazy to me that the solution is this indirect and complex and unintuitive.
Color.red
.aspectRatio(1, contentMode: .fill)
.overlay {
Image(.liberaltears)
.resizable()
.scaledToFill()
}
.clipped()
.padding()
You're using a different image. It was .personsmiling, now it's .liberaltears for some reason. Does it work with the .personsmiling image?
As an aside, those names are difficult to read without capitalisation. I'd use .personSmiling, for example.
l in SwiftUI if you make an image resizable while also not preserving its aspect ratio via .scaledToFit(), it will stretch to fill its container.
So this more effectively achieved what I wanted, but again as a newbie to SwiftUI coming from CSS, it feels far from intuitive and bizarre that I have to specify the aspectRatio modifier twice:
Image(.personsmiling)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.aspectRatio(1/1, contentMode: .fill)
.clipped()