Aspect ratio and content mode is two thing that can be used to modify how to display an image in SwiftUI. This is a technique that can place image to fill or fit in the view. It can also add padding to stretch the image. There are some advantages to use aspect ratio such as visual consistency, better user experience, responsive design, and soon.
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌
Join the Waitlist Today! https://mozzlog.com/projects/network-spy
Also Read:
The image below is quite big for a smartphone screen. We want to apply aspect ratio to it to show how that modifier affect how the car displayed to user.
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌
Join the Waitlist Today! https://mozzlog.com/projects/network-spy
Aspect Ratio with Content Mode Fill
To perform aspect ratio with content mode
fill, all you need to do is use aspectRatio(contentMode: .fill) modifier from the target view.Image("car") .resizable() .aspectRatio(contentMode: .fill) .frame(width: 250, height: 250) .border(Color.blue)
When you aspect ratio the above image, it will fill the image frame size.
For example, if the image is 640 × 800 while your view is a rectangle of 250x250, then using above modifier will fill all container view frame and the remaining area of the image will exceed the bounds.
Aspect Ratio with Content Mode Fit
This content mode is perfect if you want to show the image and keeping its own dimension. If you have image that has different aspect ratio with its SwiftUI’s image view container, you may want to use this mode to show the image fully.
Image("car") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 250, height: 250) .border(Color.blue)
Read More:
More Aspect Ratio
Aspect Ratio modifier has an optional parameter that we haven’t talked yet before.
If you check
.aspectRatio API, you will find optional CGFloat and CGSize property. Those properties has different use case.With CGSize
This parameter defines the aspect ratio to be applied before the view scaled to its frame.
Image("car") .resizable() .aspectRatio(CGSize(width: 2, height: 4),contentMode: .fit) .frame(width: 250, height: 250) .border(Color.blue)
With CGFloat
This parameter also defines the aspect ratio to be applied before the view scaled to its frame. But you pass a
CGFloat value of width divided by height.Image("car") .resizable() .aspectRatio(2.0,contentMode: .fit) .frame(width: 250, height: 250) .border(Color.blue)
Conclusion
Aspect Ratio gives Swift developers a powerful tool to show a view inside a frame. This tool when combined with another one will result in a beautiful outcome for the UI.
Happy Aspect Ratio!
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌
Join the Waitlist Today! https://mozzlog.com/projects/network-spy