SwiftSwiftUIApple
Last updated at 2023-09-07

How to Image Aspect in SwiftUI

ClickUp
Note
AI Status
Last Edit By
Last edited time
Sep 7, 2023 02:41 PM
Metatag
Slug
how-to-image-aspect-in-swiftui
Writer
Published
Published
Date
Jun 26, 2023
Category
Swift
SwiftUI
Apple
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.
Photo by Pavel Golasowski on Unsplash
🚦
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

Discussion (0)

Related Posts